/* ============================================================
   Modern “clean card” look + fuller media for Mastodon
   Paste into: Admin → Settings → Appearance → Custom CSS
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  --gg-bg: #0b0c0f;
  --gg-surface: rgba(255, 255, 255, 0.06);
  --gg-surface-2: rgba(255, 255, 255, 0.09);
  --gg-border: rgba(255, 255, 255, 0.10);
  --gg-text: rgba(255, 255, 255, 0.92);
  --gg-text-2: rgba(255, 255, 255, 0.70);
  --gg-text-3: rgba(255, 255, 255, 0.55);
  --gg-radius: 16px;
  --gg-radius-sm: 12px;
  --gg-shadow: 0 10px 30px rgba(0,0,0,0.35);
  --gg-shadow-soft: 0 6px 18px rgba(0,0,0,0.28);
}

/* ---------- Base ---------- */
html, body {
  background: radial-gradient(1200px 800px at 20% -10%, rgba(255,255,255,0.08), transparent 60%),
              radial-gradient(900px 600px at 90% 0%, rgba(255,255,255,0.06), transparent 55%),
              var(--gg-bg) !important;
  color: var(--gg-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { text-underline-offset: 2px; }
a, .link-button { color: var(--gg-text) !important; }

/* Slightly modernize type scale */
body, .ui, .app-body, .columns-area {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

/* ---------- Panels / Columns ---------- */
.columns-area__panels,
.column,
.drawer,
.getting-started,
.navigation-panel,
.compose-form,
.search,
.about__section,
.box-widget,
.account__section-headline,
.account__section-headline a {
  border-radius: var(--gg-radius) !important;
}

/* Column chrome */
.column > .column-header,
.column-header,
.column-header__button,
.drawer__header,
.drawer__header a,
.navigation-panel__logo {
  background: transparent !important;
}

.column, .drawer, .navigation-panel, .getting-started {
  background: rgba(0,0,0,0.18) !important;
  border: 1px solid var(--gg-border) !important;
  box-shadow: var(--gg-shadow-soft) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Reduce harsh separators */
.column-header,
.drawer__header,
.navigation-panel {
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

/* Tighten overall spacing a bit */
.columns-area__panels__main {
  gap: 14px !important;
}

/* ---------- Status cards ---------- */
.status,
.detailed-status,
.notification {
  background: var(--gg-surface) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--gg-radius) !important;
  box-shadow: none !important;
  margin: 10px 10px 12px !important;
  overflow: hidden !important;
}

.status:hover,
.detailed-status:hover,
.notification:hover {
  background: var(--gg-surface-2) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* Content readability */
.status__content,
.detailed-status__content,
.reply-indicator__content {
  color: var(--gg-text) !important;
}

.status__content a,
.detailed-status__content a {
  text-decoration-thickness: 1px;
}

.status__display-name strong,
.detailed-status__display-name strong {
  letter-spacing: 0.2px;
}

/* Make timestamps + meta softer */
.status__relative-time,
.detailed-status__datetime,
.status__display-name span,
.display-name__account,
.notification__message {
  color: var(--gg-text-3) !important;
}

/* ---------- Compose box ---------- */
.compose-form {
  background: var(--gg-surface) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: var(--gg-shadow-soft) !important;
}

.compose-form__textarea,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
.search__input {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 12px !important;
  color: var(--gg-text) !important;
}

.compose-form__textarea:focus,
textarea:focus,
input:focus {
  outline: none !important;
  border-color: rgba(255,255,255,0.20) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08) !important;
}

/* Buttons */
button,
.button,
.icon-button,
.text-btn {
  border-radius: 12px !important;
}

.button,
button.button {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: var(--gg-text) !important;
}

.button:hover,
button.button:hover {
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.20) !important;
}

/* ---------- Fuller media (the main ask) ---------- */
/* Remove “boxed” feeling around attachments and let them breathe */
.status__attachments,
.detailed-status__attachments,
.media-gallery,
.media-gallery__item,
.attachment-list,
.attachment-list__item {
  border-radius: var(--gg-radius) !important;
}

/* Make attachments span the card width more consistently */
.status__attachments,
.detailed-status__attachments {
  margin: 10px -10px -12px !important; /* pull to card edges */
  padding: 0 !important;
}

/* If there’s a content warning / sensitive toggle area, keep spacing clean */
.status__content__spoiler-link,
.detailed-status__content__spoiler-link {
  margin-bottom: 8px !important;
}

/* Media gallery: bigger, more “full bleed”, with modern rounding */
.media-gallery {
  gap: 6px !important;
  padding: 10px !important;
  background: transparent !important;
}

/* Individual media tiles */
.media-gallery__item,
.media-gallery__item-thumbnail,
.media-gallery__preview {
  border-radius: var(--gg-radius) !important;
  overflow: hidden !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.28) !important;
}

/* Ensure images cover their boxes (less letterboxing) */
.media-gallery__item img,
.media-gallery__item-thumbnail img,
.media-gallery__preview img,
.attachment__image img,
.status__attachments img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Give single-image posts a taller, more editorial feel */
.status__attachments:has(.media-gallery__item:only-child) .media-gallery__item,
.detailed-status__attachments:has(.media-gallery__item:only-child) .media-gallery__item {
  min-height: 360px !important;
}

/* Multi-image grid tiles slightly taller */
.media-gallery__item {
  min-height: 160px !important;
}

/* Link preview cards (OpenGraph) more modern */
.status-card,
.card,
.link-preview,
.status__content .link-preview {
  border-radius: var(--gg-radius) !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

.status-card__image,
.card__image {
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.status-card__content,
.card__content {
  padding: 12px 14px !important;
}

.status-card__title,
.card__title {
  color: var(--gg-text) !important;
}

.status-card__description,
.card__description {
  color: var(--gg-text-2) !important;
}

/* ---------- Header / Profile pages ---------- */
.account__header,
.hero-widget,
.profile-header {
  border-radius: var(--gg-radius) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.04) !important;
  box-shadow: var(--gg-shadow-soft) !important;
}

/* Make profile header image feel full and crisp */
.account__header__image,
.account__header__image img {
  width: 100% !important;
  height: 280px !important;
  object-fit: cover !important;
}

/* ---------- Reduce visual noise ---------- */
hr,
.column-link,
.detailed-status__action-bar,
.status__action-bar {
  border-color: rgba(255,255,255,0.07) !important;
}

.status__action-bar__button,
.icon-button {
  color: rgba(255,255,255,0.68) !important;
}

.status__action-bar__button:hover,
.icon-button:hover {
  color: rgba(255,255,255,0.92) !important;
  background: rgba(255,255,255,0.06) !important;
}

/* ---------- Optional: slightly wider reading column on large screens ---------- */
@media (min-width: 1200px) {
  .columns-area__panels__main {
    max-width: 1480px !important;
    margin: 0 auto !important;
  }
}

/* ---------- Optional: soften scrollbars (WebKit) ---------- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.14);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.20); }
*::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }

/* -----------------------------
   Fuller Server Thumbnail / Hero / Mascot
   ----------------------------- */

/* ------------ Server Icon (login/home) full bleed ------------ */
.application__sidebar__header,
.authentication__header,
.instance__header {
  background: none !important;
  padding: 0 !important;
}

/* Target the Mastodon server thumbnail containers */
.instance__logo,
.authentication__instance-logo,
.application__sidebar__logo {
  width: 100% !important;
  height: 240px !important;
  border-radius: var(--gg-radius) !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
}

.instance__logo img,
.authentication__instance-logo img,
.application__sidebar__logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Optional darker overlay for readability */
.instance__logo:after,
.authentication__instance-logo:after,
.application__sidebar__logo:after {
  content: "" !important;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.26);
  pointer-events: none;
  border-radius: var(--gg-radius) !important;
}

/* ------------ Hero / Profile Banner ------------ */
.profile-header__banner,
.account__header__banner,
.user-banner {
  width: 100% !important;
  height: 340px !important;
  border-radius: var(--gg-radius) !important;
  overflow: hidden !important;
  margin-bottom: 18px !important;
}

.profile-header__banner img,
.account__header__banner img,
.user-banner img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ------------ Mascot / Site Logo (nav) ------------ */
/* Enlarge and modernize the navbar/site logo */
.navigation-panel__logo,
.navigation-panel__logo img,
.app-header__logo,
.app-header__logo img {
  width: auto !important;
  height: 48px !important;
  object-fit: contain !important;
  margin-right: 6px !important;
}

/* If your theme uses a smaller variant, override to keep it crisp */
.navigation-panel__logo svg,
.app-header__logo svg {
  height: 46px !important;
  width: auto !important;
}

/* Optional: hover effect */
.navigation-panel__logo:hover img,
.app-header__logo:hover img {
  transform: scale(1.08);
  transition: transform 0.18s ease-in-out;
}

/* ------------ Consistency helpers ------------ */
/* Ensure card-like containers don’t clip fuller visuals */
.instance__header,
.authentication__header,
.profile-header,
.account__header {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Add subtle dark gradient for contrast (optional) */
.profile-header__banner:before,
.instance__logo:before,
.authentication__instance-logo:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.32));
  pointer-events: none;
  border-radius: var(--gg-radius) !important;
}