/* Table of contents
--------------------------------------------------

- Page
- Rounded user avatars
- Social icons
- Buttons
- Brand icons
- Brand styles

*/

/* Page
-------------------------------------------------- */
body {
  color: var(--slate-ink) !important;
  background-color: var(--slate-bg) !important;
  background-image: none !important;
  font-family: 'Geologica', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Rounded avatars
-------------------------------------------------- */
[class*="avatar"],
[id*="avatar"],
.profile-picture,
#profilePicture {
  display: block !important;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

[class*="avatar"] {
  text-align: center;
}

.rounded-avatar,
img[class*="avatar"],
[class*="avatar"] img,
.profile-picture img,
#profilePicture {
  border-radius: 50%;
  border: 3px solid var(--slate-accent);
  background-color: var(--slate-bg);
  object-fit: cover;
}

/* Social icons
-------------------------------------------------- */
.social-icon {
  padding: 10px;
  font-size: 32px;
  color: var(--slate-ink);
}
.social-icon:hover {
  color: var(--slate-ink-strong);
}
.social-icon-div {
  padding-bottom: 30px;
}

/* Buttons
-------------------------------------------------- */
.button,
button:not([class*="sharebutton"]) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start;
  gap: 14px;
  width: 100% !important;
  max-width: 100%;
  min-height: 60px;
  height: auto !important;
  box-sizing: border-box;
  margin: 0 0 12px !important;
  padding: 16px 20px !important;
  border: 1px solid var(--slate-accent-rim) !important;
  border-radius: var(--slate-radius) !important;
  background-color: var(--slate-accent) !important;
  color: var(--slate-ink) !important;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2 !important;
  letter-spacing: -.02em;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  word-wrap: break-word;
  box-shadow: none !important;
  outline: none;
  cursor: pointer;
  transition:
    background-color 200ms var(--slate-ease),
    border-color 200ms var(--slate-ease),
    width 120ms var(--slate-ease),
    padding 120ms var(--slate-ease),
    margin 120ms var(--slate-ease);
}

.button:hover,
.button:focus,
button:not([class*="sharebutton"]):hover,
button:not([class*="sharebutton"]):focus {
  background-color: var(--slate-accent-hover) !important;
  border-color: var(--slate-accent-hover-rim) !important;
  color: var(--slate-ink-strong) !important;
  filter: none !important;
}

/* Hover growth: 2px wider, 2px taller, layout unchanged */
.button:hover,
button:not([class*="sharebutton"]):hover {
  width: calc(100% + 2px) !important;
  min-height: 62px;
  margin: -1px -1px 11px !important;
  padding: 17px 21px !important;
}

/* LinkStack ships its own hover and click effects, this theme does not use them */
.button-hover:hover,
.button-click:active,
.icon-hover:hover .icon,
.button:hover .hvr-icon,
[class*="hvr-"]:hover,
[class*="hvr-"]:focus,
[class*="hvr-"]:active {
  -webkit-transform: none !important;
  transform: none !important;
  animation: none !important;
  box-shadow: none !important;
}

.button:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .18) !important;
}

.button::before,
.button::after,
.button a::before,
.button a::after {
  display: none !important;
  content: none !important;
}

/* Brand icons
-------------------------------------------------- */
.icon,
.button img,
.button svg,
.button i {
  width: 24px !important;
  height: 24px !important;
  flex: none;
  align-self: center;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
  color: var(--slate-ink);
  opacity: .95;
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

/* Brand icons are monochrome SVGs, so they take the white silhouette.
   An icon uploaded through the admin panel is a real picture: its colors are inverted,
   so a favicon drawn dark on a light background reads on the dark background here. */
.button img.icon[src*="/favicon/"],
.button img.icon[src$=".png"],
.button img.icon[src$=".jpg"],
.button img.icon[src$=".jpeg"],
.button img.icon[src$=".ico"],
.button img.icon[src$=".webp"] {
  -webkit-filter: invert(1) !important;
  filter: invert(1) !important;
  opacity: 1;
  border-radius: 4px;
}

/* Brand styles
-------------------------------------------------- */
.button[class*="button-"]:not(:has(.button)) {
  border: 1px solid var(--slate-accent-rim) !important;
  border-radius: var(--slate-radius) !important;
  background-color: var(--slate-accent) !important;
  color: var(--slate-ink) !important;
  box-shadow: none !important;
  filter: none !important;
}

.button[class*="button-"]:not(:has(.button)):hover,
.button[class*="button-"]:not(:has(.button)):focus {
  background-color: var(--slate-accent-hover) !important;
  border-color: var(--slate-accent-hover-rim) !important;
  color: var(--slate-ink-strong) !important;
  filter: none !important;
}

/* Highlighted link */
.button.button-primary,
.button.featured,
.button.primary {
  background-color: var(--slate-accent-strong) !important;
  border-color: var(--slate-accent-strong-rim) !important;
  color: var(--slate-ink-strong) !important;
}

.button.button-primary:hover,
.button.featured:hover,
.button.primary:hover {
  background-color: var(--slate-accent-hover) !important;
  border-color: var(--slate-accent-strong-rim) !important;
}

/* One frame per link: a wrapper around a button draws nothing */
.button:has(.button),
.button-container:has(.button),
[class*="button-"]:has(.button) {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
}