/* villageidiot.town — LOOK A — no cursive.
   Windows Comic Sans, Apple Chalkboard,
   Android Coming Soon if present else Roboto/Arial,
   Linux Liberation Sans. Script families removed. */
:root {
  --bg: #c8d9e8;
  --bg-soft: #dce8f3;
  --text: #1a1a1a;
  --text-muted: #4a5568;
  --heading: #0d47a1;
  --link: #1565ff;
  --link-hover: #0a4aa8;
  --accent: #3a9bdc;
  --accent-dark: #1e7bb8;
  --glass: rgba(255, 255, 255, 0.7);
  --border: #a8c0d8;
  --shadow: 0 1px 4px rgba(0, 40, 80, 0.12);
  --sticker:
    -1px -1px 0 #000000,
     1px -1px 0 #000000,
    -1px  1px 0 #000000,
     1px  1px 0 #000000,
    -2px  0 0 #000000,
     2px  0 0 #000000,
     0 -2px 0 #000000,
     0  2px 0 #000000,
     3px  3px 0 #000000,
     5px  4px 0 #1e7bb8,
     7px  6px 0 #7ad0ff;
  --sticker-hover:
    -1px -1px 0 #000000,
     1px -1px 0 #000000,
    -1px  1px 0 #000000,
     1px  1px 0 #000000,
    -2px  0 0 #000000,
     2px  0 0 #000000,
     0 -2px 0 #000000,
     0  2px 0 #000000,
     3px  3px 0 #000000,
     5px  4px 0 #ff4d8d,
     7px  6px 0 #7ad0ff;
}

body, .ui, .columns-area, .column, .drawer, .drawer__inner {
  font-family:
    "Comic Sans MS",
    "Chalkboard SE",
    "Chalkboard",
    "Marker Felt",
    "Coming Soon",
    "Liberation Sans",
    Arial,
    Helvetica,
    Roboto,
    "Noto Sans",
    mastodon-font-sans-serif,
    sans-serif !important;
  background: linear-gradient(180deg, #d4e4f4 0%, #b8cde0 100%) !important;
  color: var(--text) !important;
  font-size: 1.05em !important;
  line-height: 1.45 !important;
}

/* Column titles (Home header, etc.) — no sticker */
.column-header__title,
.column-header__text {
  color: var(--heading) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

/* Icons stay blue — house, bells, cog, back arrows */
.column-header svg,
.column-header .icon,
.column-header__icon,
.column-header .icon-button,
.column-header button svg,
.column-link svg,
.column-link .icon,
.column-link .column-link__icon,
.column-link__icon,
.drawer .column-link svg,
.drawer .column-link .icon,
.icon-button svg,
button.icon-button {
  color: #1e7bb8 !important;
  fill: #1e7bb8 !important;
  stroke: #1e7bb8 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  filter: none !important;
}

.status__content,
.status__content p,
.autosuggest-textarea__textarea,
.compose-form textarea {
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

/* ========== HIDE MASTODON LOGO (top right) ========== */
.logo-button,
.navigation-bar .logo,
.column-link--logo,
.drawer__inner__mastodon,
.logo {
  display: none !important;
}

/* ========== COLUMNS ========== */
.column,
.drawer__inner,
.column-header__wrapper {
  background: rgba(220, 232, 243, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow) !important;
}

.column-header {
  background: linear-gradient(180deg, #e8f1f8 0%, #c5d8ea 100%) !important;
  border-bottom: 1px solid #a0b8d0 !important;
  border-radius: 10px 10px 0 0 !important;
  margin: 0 !important;
}

/* ========== POSTS ========== */
.status, .status__wrapper, .detailed-status {
  background: var(--glass) !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  border-radius: 8px !important;
  margin: 0 4px 8px 4px !important;
  padding: 12px 12px !important;
  box-shadow: var(--shadow) !important;
}

.status__info,
.status__display-name,
.account {
  background: rgba(255, 255, 255, 0.85) !important;
  border-radius: 6px !important;
  padding: 4px 6px !important;
}

.status__content,
.status__content p {
  color: var(--text) !important;
  font-size: 1.0em !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  text-shadow: none !important;
}

.status__display-name strong,
.account__display-name strong {
  color: #0a5cff !important;
  font-weight: 700 !important;
}

.column-header__title {
  font-weight: 700 !important;
}

/* Settings / admin pages stay dark text, no sticker */
body.admin,
.admin-wrapper,
.admin,
.dashboard,
.settings,
.form-container,
.simple_form,
h1, h2, h3 {
  color: var(--text) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

.column-header__title,
.column-header__text {
  color: var(--heading) !important;
}

a, .status__content a, .account__header a, .column-link {
  color: var(--link) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.15em;
}
a:hover {
  color: var(--link-hover) !important;
}

/* ========== EMPTY STATE ========== */
.column .scrollable {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.empty-column-indicator,
.regeneration-indicator,
.error-column {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 18px 16px !important;
  color: var(--text-muted) !important;
  font-size: 0.95em !important;
  min-height: 0 !important;
  max-height: 120px !important;
}

/* ========== COMPOSE BOX ========== */
.compose-form .account,
.compose-form .account__display-name {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid #c5d4e4 !important;
  border-radius: 8px !important;
  padding: 6px 8px !important;
  margin-bottom: 8px !important;
}

.compose-form__autosuggest-wrapper,
.autosuggest-textarea,
.autosuggest-textarea__textarea,
.compose-form textarea {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--text) !important;
  border: 1px solid #c5d4e4 !important;
  border-radius: 8px !important;
  font-size: 1.0em !important;
  line-height: 1.4 !important;
  min-height: 80px !important;
  max-height: 280px !important;
  height: auto !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.compose-form {
  padding-bottom: 8px !important;
}

.compose-form__actions,
.compose-form__buttons-wrapper {
  margin-top: 8px !important;
  padding-top: 4px !important;
}

.button, button.button {
  background: linear-gradient(180deg, #5eb3e8 0%, #3a9bdc 45%, #2b86c4 100%) !important;
  color: #ffffff !important;
  border: 1px solid #1e7bb8 !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.button:hover {
  background: linear-gradient(180deg, #6ec0f0 0%, #4aa8e4 45%, #3590d0 100%) !important;
}

code, pre {
  background: rgba(255, 255, 255, 0.7) !important;
  color: #1a1a1a !important;
  border-radius: 4px;
  border: 1px solid #c0d0e0;
}

/* ========== 4.7 FOOTER MENU ========== */
._ui_components_link_footer__wrapper {
  gap: 6px !important;
  padding: 8px 2px 4px 2px !important;
}

._ui_components_link_footer__heading {
  display: none !important;
}

._ui_components_link_footer__list li:not(:last-child)::after {
  content: none !important;
}

._ui_components_link_footer__wrapper > section:first-child ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
._ui_components_link_footer__wrapper > section:first-child li {
  display: block !important;
  width: 100% !important;
}

._ui_components_link_footer__wrapper > section:first-child li:nth-child(2),
._ui_components_link_footer__wrapper > section:first-child li:nth-child(3),
._ui_components_link_footer__wrapper > section:first-child a[href$="/directory"] {
  display: none !important;
}

._ui_components_link_footer__wrapper > section:first-child a {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 72px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  text-decoration: none !important;
}
._ui_components_link_footer__wrapper > section:first-child a:hover {
  filter: brightness(1.06);
}

._ui_components_link_footer__wrapper > section:first-child a[href$="/about"] {
  background-image: url("https://cdn.masto.host/villageidiottown/custom_emojis/images/000/000/231/original/c1654b3e95d63d43.png") !important;
}

._ui_components_link_footer__wrapper > section:last-child ul {
  display: block !important;
}
._ui_components_link_footer__wrapper > section:last-child li {
  display: none !important;
}
._ui_components_link_footer__wrapper > section:last-child li:has(a[href*="github.com/mastodon"]) {
  display: inline !important;
}
._ui_components_link_footer__wrapper > section:last-child a[href*="github.com/mastodon"] {
  display: inline !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  text-decoration: none !important;
  background: none !important;
}
._ui_components_link_footer__wrapper > section:last-child a[href*="github.com/mastodon"]::after {
  content: "mastodon source";
  font-family: 'Segoe UI', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  color: #5a6b7c !important;
}
._ui_components_link_footer__wrapper > section:last-child a[href*="github.com/mastodon"]:hover::after {
  color: #0066cc !important;
  text-decoration: underline !important;
}

/* ========== RIGHT NAV LABELS ONLY ==========
   Home / Trending / Live feeds / Notifications / etc.
   White fill, tight black outline, then a bigger shifted black + blue copy.
   Icons stay plain blue. */
.navigation-panel .column-link,
.getting-started .column-link,
.getting-started__wrapper .column-link,
.columns-area__panels .navigation-panel .column-link {
  color: #ffffff !important;
  font-weight: 700 !important;
  -webkit-text-stroke: 1.15px #000000 !important;
  paint-order: stroke fill;
  text-decoration: none !important;
  text-shadow:
    /* tight black halo so the white sits inside a slightly larger black */
    -1px -1px 0 #000000,
     1px -1px 0 #000000,
    -1px  1px 0 #000000,
     1px  1px 0 #000000,
    -2px  0 0 #000000,
     2px  0 0 #000000,
     0 -2px 0 #000000,
     0  2px 0 #000000,
    /* fun shifted extras — bigger, offset, different colors */
     3px  3px 0 #000000,
     5px  4px 0 #1e7bb8,
     7px  6px 0 #7ad0ff !important;
}

.navigation-panel .column-link:hover,
.getting-started .column-link:hover,
.getting-started__wrapper .column-link:hover {
  color: #fff7c2 !important;
  text-shadow:
    -1px -1px 0 #000000,
     1px -1px 0 #000000,
    -1px  1px 0 #000000,
     1px  1px 0 #000000,
    -2px  0 0 #000000,
     2px  0 0 #000000,
     0 -2px 0 #000000,
     0  2px 0 #000000,
     3px  3px 0 #000000,
     5px  4px 0 #ff4d8d,
     7px  6px 0 #7ad0ff !important;
}

.navigation-panel .column-link svg,
.navigation-panel .column-link .icon,
.navigation-panel .column-link .column-link__icon,
.getting-started .column-link svg,
.getting-started .column-link .icon,
.getting-started .column-link .column-link__icon,
.getting-started__wrapper .column-link svg,
.getting-started__wrapper .column-link .icon {
  color: #1e7bb8 !important;
  fill: #1e7bb8 !important;
  stroke: #1e7bb8 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  filter: none !important;
  paint-order: normal !important;
}

/* ========== STICKER ON MOST UI TEXT ==========
   Same white + black ring + shifted blue copies as the right nav.
   Kept OFF: typing boxes, settings forms, icons, glossy buttons, source line. */
.column-header__title,
.column-header__text,
.status__content,
.status__content p,
.status__content a,
.status__display-name,
.status__display-name strong,
.status__display-name .display-name__account,
.account__display-name,
.account__display-name strong,
.display-name,
.display-name__html,
.display-name__account,
.status__relative-time,
.status__info,
.notification__message,
.empty-column-indicator,
.regeneration-indicator,
.reply-indicator__content,
.detailed-status__display-name,
.detailed-status p,
.poll__option,
.poll__footer,
.spoiler-button__spoiler-text,
.hashtag-bar,
.column-link,
.drawer .column-link,
.getting-started p,
.getting-started__trends,
.search-popout,
.dropdown-menu__item,
.dropdown-menu__container,
.privacy-dropdown__option__content,
.character-counter,
.compose-form .account__display-name {
  color: #ffffff !important;
  -webkit-text-stroke: 1px #000000 !important;
  paint-order: stroke fill;
  text-shadow: var(--sticker) !important;
}

.status__content,
.status__content p,
.detailed-status p {
  font-weight: 600 !important;
  line-height: 1.55 !important;
}

.status__content a,
.hashtag-bar a,
.mention,
.status__content .mention {
  color: #fff7c2 !important;
  text-decoration: underline !important;
}

.status__content a:hover,
.column-link:hover,
.drawer .column-link:hover {
  color: #fff7c2 !important;
  text-shadow: var(--sticker-hover) !important;
}

/* carve-outs: do not sticker these */
input,
textarea,
select,
.autosuggest-textarea__textarea,
.compose-form textarea,
.search__input,
.simple_form input,
.simple_form textarea,
.admin-wrapper,
.admin-wrapper *,
body.admin,
.settings,
.form-container,
code,
pre,
.button,
button.button,
svg,
.icon,
.icon-button,
.column-link__icon,
.column-header svg,
.column-header .icon,
._ui_components_link_footer__wrapper > section:last-child a[href*="github.com/mastodon"]::after {
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  paint-order: normal !important;
}

input,
textarea,
select,
.autosuggest-textarea__textarea,
.compose-form textarea,
.search__input {
  color: #1a1a1a !important;
}

svg,
.icon,
.icon-button,
.column-link__icon,
.column-header svg,
.column-link svg {
  color: #1e7bb8 !important;
  fill: #1e7bb8 !important;
}

/* Public signup / rules / login: keep dark text on the light blue page
   even when the phone is in Dark Mode. */
.form-container,
.form-container .title,
.form-container .lead,
.form-container .label,
.form-container .hint,
.form-container p,
.form-container li,
.rules-list,
.rules-list__text,
.container-alt,
.container-alt .title,
.container-alt .lead,
.progress-tracker,
.simple_form label,
body:not(.app-body),
body:not(.app-body) p,
body:not(.app-body) li,
body:not(.app-body) .title {
  color: #1a1a1a !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

.form-container,
.container-alt {
  background: transparent !important;
}

.button.button-secondary {
  color: #0d47a1 !important;
  background: #ffffff !important;
}