/* Google, Yelp and the shop's social profiles, shared by every layout: a row of marks
   at the top of the footer, and a named list where each home page says where to find
   the shop. Both take their colour and type from the layout around them, so each one
   stays in its own system. Markup contract (templates/dry-cleaners/PROJECT.md, token
   table): ul.social-links > li[data-social=<kind>] > a[data-token-href=<kind>]; the
   generator keeps the kinds a client connected and removes every [data-socials]
   element when there are none. The marks are Simple Icons (CC0); each stays its
   owner's trademark and only names where the link goes. */
.social-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.social-links li { margin: 0; }
.social-links a { display: inline-flex; align-items: center; color: inherit; }
.social-links svg { display: block; flex: none; width: 20px; height: 20px; fill: currentColor; }
[data-socials][hidden] { display: none !important; }

/* Footer: marks only, each on a 40px target, the link's name read out instead. */
footer .social-links { justify-content: center; gap: 4px; margin: -8px 0 4px; }
footer .social-links a { justify-content: center; width: 40px; height: 40px; }
footer .social-links a:hover { opacity: .72; }

/* Home page: mark and name, in the text's own size. */
.social-links--named { gap: 6px 20px; }
.social-links--named a { gap: .45em; padding: 2px 0; }
.social-links--named svg { width: 1.1em; height: 1.1em; }
/* Endor and Tabor put it under a paragraph (the call note, the hours note) rather
   than in a list of facts, so it needs the paragraph's own space above it. */
.call .social-links--named, .hours-map .social-links--named { margin-top: 16px; }

/* Live from the shop's account (agency-site/site-live.js). Every [data-live] slot ships
   hidden and empty; the script fills it and unhides it only on a live site whose owner
   switched something on. The guard keeps a slot hidden even where a layout rule gives it
   a display. Each layout colours .live-closed (the holiday-closing line the script puts
   above the header) in its own styles.css; this is only the shape it shares. */
[data-live][hidden] { display: none !important; }
.live-closed { margin: 0; padding: 10px 16px; text-align: center; font-weight: 600; line-height: 1.4; }