/* ICS button pass 2026-11-04. Owner: no round buttons. Secondary = rectangular torn button, white fill, grey 20% halftone, 1px torn edge.
   Pink hover only under (hover:hover) and (pointer:fine); pink on :focus-visible and :active; no stuck state on touch.
   Scope: (1) footer socials #ft-social a (tpl 269, raw anchors). (2) place-card pills .nw-links a.is-call|is-map|is-web (.nw-card grids).
   Pills: icon moved from ::before to ::after background; tear-guard.css ::before icon and ::after tap area are overridden here, that file is not edited.
   Silhouette: uploads/ics-torn/btn-torn-mask-a-r2.svg (same as a.ics-ev-sec in uploads/ics-motion/ics-btn-hover.css). Tokens only; icon art is the only literal colour. */

/* 1. Footer socials: 48px rectangles, black fill, white 40% torn edge, white icon. */
html body #ft-social#ft-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-s);
}
html body #ft-social#ft-social a {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #ffffff !important;
  text-decoration: none;
  --torn-fill: var(--neutral-1000);
  --torn-edge: color-mix(in srgb, #ffffff 40%, transparent);
}
html body #ft-social#ft-social a::before,
html body #ft-social#ft-social a::after {
  content: '';
  position: absolute;
  width: auto;
  height: auto;
  transform: none;
  pointer-events: none;
  -webkit-mask: url(/wp-content/uploads/ics-torn/btn-torn-mask-a-r2.svg) center / 100% 100% no-repeat;
  mask: url(/wp-content/uploads/ics-torn/btn-torn-mask-a-r2.svg) center / 100% 100% no-repeat;
}
html body #ft-social#ft-social a::before {
  inset: 0;
  z-index: -2;
  background: var(--torn-edge);
}
html body #ft-social#ft-social a::after {
  inset: 1px;
  z-index: -1;
  background: var(--torn-fill);
}
html body #ft-social#ft-social svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}
@media (hover: hover) and (pointer: fine) {
  html body #ft-social#ft-social a:hover {
    --torn-fill: var(--ics-pink-hover);
    --torn-edge: var(--ics-pink-hover);
    color: #ffffff !important;
  }
}
html body #ft-social#ft-social a:focus-visible {
  --torn-fill: var(--ics-pink-hover);
  --torn-edge: var(--ics-pink-hover);
  color: #ffffff !important;
  outline: 2px solid var(--heading);
  outline-offset: 3px;
}
html body #ft-social#ft-social a:active {
  --torn-fill: var(--ics-pink-brand-press);
  --torn-edge: var(--ics-pink-brand-press);
  color: #ffffff !important;
}

/* 2. Place-card pills: rectangular torn secondary, icon + label on one line, min-height 2.5rem. */
html body :is(#wn-news-grid,#news-grid-home,.nw-card) .nw-links.nw-links.nw-links a:is(.is-call,.is-map,.is-web) {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 2.5rem;
  margin: 0;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  white-space: nowrap;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--neutral-1000) !important;
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  text-decoration: none;
  --torn-fill: #ffffff;
  --torn-dot: var(--neutral-500);
  --torn-dot-alpha: 20%;
  --torn-dot-r: 0.9px;
  --torn-grid: 4px;
  --torn-edge: var(--border-ui);
}
html body :is(#wn-news-grid,#news-grid-home,.nw-card) .nw-links.nw-links.nw-links a.is-call { --torn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2A19.8 19.8 0 0 1 11.2 19a19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
html body :is(#wn-news-grid,#news-grid-home,.nw-card) .nw-links.nw-links.nw-links a.is-map { --torn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
html body :is(#wn-news-grid,#news-grid-home,.nw-card) .nw-links.nw-links.nw-links a.is-web { --torn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 2.5 15.3 0 18M12 3c-2.5 2.7-2.5 15.3 0 18' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }
@media (hover: hover) and (pointer: fine) {
  html body :is(#wn-news-grid,#news-grid-home,.nw-card) .nw-links.nw-links.nw-links a.is-call:hover { --torn-icon: url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2A19.8 19.8 0 0 1 11.2 19a19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
  html body :is(#wn-news-grid,#news-grid-home,.nw-card) .nw-links.nw-links.nw-links a.is-map:hover { --torn-icon: url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
  html body :is(#wn-news-grid,#news-grid-home,.nw-card) .nw-links.nw-links.nw-links a.is-web:hover { --torn-icon: url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 2.5 15.3 0 18M12 3c-2.5 2.7-2.5 15.3 0 18' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); }
  html body :is(#wn-news-grid,#news-grid-home,.nw-card) .nw-links.nw-links.nw-links a:is(.is-call,.is-map,.is-web):hover {
    --torn-fill: var(--ics-pink-hover);
    --torn-dot: #000000;
    --torn-dot-alpha: 22%;
    --torn-edge: var(--ics-pink-hover);
    color: #ffffff !important;
  }
}
html body :is(#wn-news-grid,#news-grid-home,.nw-card) .nw-links.nw-links.nw-links a.is-call:is(:focus-visible,:active) { --torn-icon: url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2A19.8 19.8 0 0 1 11.2 19a19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
html body :is(#wn-news-grid,#news-grid-home,.nw-card) .nw-links.nw-links.nw-links a.is-map:is(:focus-visible,:active) { --torn-icon: url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
html body :is(#wn-news-grid,#news-grid-home,.nw-card) .nw-links.nw-links.nw-links a.is-web:is(:focus-visible,:active) { --torn-icon: url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 2.5 15.3 0 18M12 3c-2.5 2.7-2.5 15.3 0 18' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); }
html body :is(#wn-news-grid,#news-grid-home,.nw-card) .nw-links.nw-links.nw-links a:is(.is-call,.is-map,.is-web):focus-visible {
  --torn-fill: var(--ics-pink-hover);
  --torn-dot: #000000;
  --torn-dot-alpha: 22%;
  --torn-edge: var(--ics-pink-hover);
  color: #ffffff !important;
  outline: 2px solid var(--heading);
  outline-offset: 3px;
}
html body :is(#wn-news-grid,#news-grid-home,.nw-card) .nw-links.nw-links.nw-links a:is(.is-call,.is-map,.is-web):active {
  --torn-fill: var(--ics-pink-brand-press);
  --torn-dot: #000000;
  --torn-dot-alpha: 22%;
  --torn-edge: var(--ics-pink-brand-press);
  color: #ffffff !important;
}
html body :is(#wn-news-grid,#news-grid-home,.nw-card) .nw-links.nw-links.nw-links a:is(.is-call,.is-map,.is-web)::before,
html body :is(#wn-news-grid,#news-grid-home,.nw-card) .nw-links.nw-links.nw-links a:is(.is-call,.is-map,.is-web)::after {
  content: '';
  position: absolute;
  width: auto;
  height: auto;
  min-width: 0;
  max-width: none;
  min-height: 0;
  max-height: none;
  transform: none;
  pointer-events: none;
  -webkit-mask: url(/wp-content/uploads/ics-torn/btn-torn-mask-a-r2.svg) center / 100% 100% no-repeat;
  mask: url(/wp-content/uploads/ics-torn/btn-torn-mask-a-r2.svg) center / 100% 100% no-repeat;
}
html body :is(#wn-news-grid,#news-grid-home,.nw-card) .nw-links.nw-links.nw-links a:is(.is-call,.is-map,.is-web)::before {
  inset: 0;
  z-index: -2;
  background: var(--torn-edge);
}
html body :is(#wn-news-grid,#news-grid-home,.nw-card) .nw-links.nw-links.nw-links a:is(.is-call,.is-map,.is-web)::after {
  inset: 1px;
  z-index: -1;
  background:
    var(--torn-icon) 0.75rem center / 1rem 1rem no-repeat,
    radial-gradient(circle, color-mix(in srgb, var(--torn-dot) var(--torn-dot-alpha), transparent) var(--torn-dot-r), transparent calc(var(--torn-dot-r) + 0.5px)) 0 0 / var(--torn-grid) var(--torn-grid),
    var(--torn-fill);
}
