/* ============================================================================
   Turtle Shell Home Protection — footer social icons
   ----------------------------------------------------------------------------
   The footer "Connect" column shows an icon per profile instead of the raw URL
   the original printed. See ORIGINAL-SITE-DEFECTS.md, "Client-requested
   changes", for the request and what it changes visually.

   Loaded after design.css and swatches.css. design.css is a vendor file and is
   not edited, so everything here has to beat what it already says about this
   column:

     .footer-col ul     {display:grid;gap:var(--s-2)}                   (0,1,1)
     .footer-col a,
     .footer-social a   {color:…;font-size:…;word-break:break-word}     (0,1,1)

   Both are specificity (0,1,1). A bare `.footer-social` or `.social-link`
   is (0,1,0) and would lose to them however late this file loads, so every
   selector below is two classes deep.
   ============================================================================ */

/* A wrapping row, not the column .footer-col ul makes of every other list in
   the footer.

   The gaps are asymmetric on purpose. .footer-grid goes to 1.4fr 1fr 1fr 1fr
   at 768px, which is where this column is narrowest in absolute terms — 131px,
   against 343px in the single-column layout below 768 and 249px at 1440. Three
   44px targets need 132px of content box, so a symmetric var(--s-2) gap misses
   a third icon by four pixels and drops the column to four rows of two. A 4px
   column gap fits three there, five at 1440 and all seven on one line on
   mobile, and still leaves 28px between icon glyphs because each target
   carries 12px of its own padding.

   Row gap stays at var(--s-2): the :focus-visible ring below is 3px at a 2px
   offset, so it reaches 5px past the target, and 8px keeps a wrapped row's
   ring clear of the row above it. */
.footer-col .footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-1);
  /* The 44px target centres a 20px icon, so it carries 12px of padding on each
     side. Without pulling that back the icons would start 12px right of the
     "Connect" heading above them and of every link in the two columns beside
     them. */
  margin-left: -12px;
}

/* 44x44 is the WCAG 2.2 target-size minimum, and it is the reason the link is
   a flex box in its own right rather than shrink-wrapping the 20px svg. */
.footer-social .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-1);
  color: rgba(255, 255, 255, .75);
  transition: color var(--dur) var(--ease);
}

/* rgba(255,255,255,.75) at rest and var(--accent) on hover is exactly what
   design.css gives .footer-col a. The icons follow the text links they sit
   beside rather than introducing a second footer link colour. */
.footer-social .social-link:hover {
  color: var(--accent);
  /* a:hover{text-decoration:underline} in design.css has nothing to underline
     here, but an underline on a 44px empty box is what it would draw if a
     future icon ever carried a text fallback. */
  text-decoration: none;
}

/* design.css declares a global :focus-visible ring. Restating it at this
   specificity keeps it on a link whose other states are set two classes deep,
   and copies its width, colour and offset rather than inventing a second ring:
   outline:3px solid var(--accent); outline-offset:2px; border-radius:4px. */
.footer-social .social-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The svg also carries width="20" height="20" as presentation attributes, so
   the row keeps its shape if this file has not arrived yet. flex:none stops a
   wrapping row from squeezing an icon out of square. */
.footer-social .social-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
}

/* Dark mode — deliberately the same two colours.

   The footer is background:var(--bg-dark) and the dark block in design.css
   does not redefine --bg-dark, so this column sits on #12261a under both
   schemes. Measured on that background: rgba(255,255,255,.75) is 9.4:1 and
   var(--accent) #3ccf4e is 7.7:1, both clear of the 4.5 floor, so neither
   state needs the #6fdc84 substitution design.css applies to link text on the
   #0f1a13 page background. Following that substitution here would in fact be
   the wrong move: .footer-col a:hover keeps var(--accent) in dark, and the
   icons would become the one green in the footer that did not match.

   The pair is restated rather than left to the rules above so the two schemes
   cannot drift — a hover declared in one scheme only is the bug design.css
   records against .city-chip. */
@media (prefers-color-scheme: dark) {
  .footer-social .social-link {
    color: rgba(255, 255, 255, .75);
  }

  .footer-social .social-link:hover {
    color: var(--accent);
  }
}