/* ============================================================
   keith's cute forum — pink / teal / a little bit sparkly
   ------------------------------------------------------------
   Paste into Admin → Appearance → Custom CSS. Everything here is
   unlayered on purpose: it overrides atmobb's built-ins without
   !important. See docs/theming.md for the token and class contract.

   Palette
     pink  — surfaces, borders, links
     teal  — accent, buttons, category bars
     yellow + rosy cheeks — pinned things, board icons
   ============================================================ */

/* @import has to be the first rule in the stylesheet. If you upload
   fonts through Admin → Appearance instead, delete this line and the
   font families below still fall back gracefully. */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  /* type */
  --font-display: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --font-wordmark: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Nunito', 'Segoe UI', system-ui, sans-serif;

  /* surfaces — strawberry milk */
  --forum-bg: #ffe6f0;
  --forum-surface: #fffafc;
  --forum-surface-2: #fff0f6;
  --forum-sunken: #ffdfeb;
  --forum-line: #ffcadd;
  --forum-line-strong: #f7a6c6;
  --forum-edge: #f08db6;
  --forum-bevel: rgba(255, 255, 255, 0.9);

  /* text — deep teal so it stays cute without going grey */
  --forum-ink: #24384a;
  --forum-ink-soft: #5a6f80;
  --forum-ink-faint: #8a9cab;

  /* accent — teal fills, pink links */
  --forum-accent: #4fd3c8;
  --forum-accent-hover: #34c3b7;
  --forum-accent-ink: #083c38;
  --forum-accent-soft: #d6f6f2;
  --forum-link: #c8307a;
  --forum-link-hover: #9a1f5c;

  /* category bars + masthead nav — teal with a yellow underline */
  --forum-cat-bg: linear-gradient(180deg, #7ae6dc, #4fd3c8);
  --forum-cat-ink: #073b37;
  --forum-cat-edge: #ffd93d;

  /* masthead */
  --forum-header-bg: linear-gradient(180deg, #fffafc, #ffedf4);
  --forum-header-ink: #24384a;

  /* pinned — electric yellow sticky note */
  --forum-pin-bg: #fff5c2;
  --forum-pin-edge: #c99500;

  /* ranks — deep teal on mint */
  --forum-rank: #157a71;
  --forum-rank-bg: #dff7f3;

  /* rounder everything. These aren't part of the stable token contract,
     so if they stop working one day the theme just gets a bit boxier. */
  --radius-xs: 4px;
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --shadow-sm: 0 1px 0 rgba(200, 48, 122, 0.05), 0 2px 4px rgba(200, 48, 122, 0.08);
  --shadow-md: 0 2px 4px rgba(200, 48, 122, 0.08), 0 6px 14px rgba(200, 48, 122, 0.12);
  --shadow-well: inset 0 1px 3px rgba(200, 48, 122, 0.1);
}

/* ---- page: pink with a scatter of teal polka dots ---- */
body {
  background-color: var(--forum-bg);
  background-image:
    radial-gradient(circle at 2px 2px, rgba(79, 211, 200, 0.32) 1.4px, transparent 2px),
    radial-gradient(circle at 14px 14px, rgba(255, 255, 255, 0.7) 1.2px, transparent 1.8px);
  background-size: 24px 24px;
}
::selection { background: #ffc2d9; }

/* ---- masthead ---- */
.atm-masthead {
  border-width: 2px;
}
.atm-masthead__name {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
}
/* a sparkle after the forum name; swap in '\1F496' for a sparkling heart */
.atm-masthead__name::after {
  content: '\2728';
  font-size: 0.7em;
  line-height: 1;
  filter: drop-shadow(0 1px 0 rgba(200, 48, 122, 0.25));
}
.atm-masthead__forum { font-weight: 600; }
.atm-masthead__slash { color: var(--forum-line-strong); }
.atm-masthead__tagline { font-weight: 600; }

/* masthead nav sits on the teal bar; hover goes deep teal, not pink */
.atm-mastnav__item {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  border-bottom-width: 3px;
}
.atm-mastnav__item:hover { color: #073b37; border-bottom-color: rgba(255, 255, 255, 0.7); }
.atm-mastnav__item--active { color: #073b37; }

/* ---- category bars ---- */
.atm-board-section {
  font-weight: 600;
  letter-spacing: 0;
  border-bottom-width: 3px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* ---- board icons: yellow with rosy cheeks ---- */
.atm-boardrow__icon {
  border-radius: 50%;
  color: #5a3d00;
  background:
    radial-gradient(circle at 20% 68%, #ff8fa8 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 80% 68%, #ff8fa8 0 3.5px, transparent 4.5px),
    linear-gradient(180deg, #ffe45c, #ffd21f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 #d99a00;
}
.atm-boardrow__icon--unread { box-shadow: inset 0 0 0 2px var(--forum-accent), 0 1px 0 #d99a00; }

/* ---- rows: pink hover, soft dividers ---- */
.atm-boardrow:hover,
.atm-threadrow:hover { background: #fff3f8; }
.atm-threadrow--pinned { box-shadow: inset 4px 0 0 var(--forum-cat-edge); }
.atm-threadrow--pinned:hover { background: #fff0b3; }

/* ---- cards & panels: chunkier pink frame, pink header strip ---- */
.atm-card,
.atm-panel { border-width: 2px; }
.atm-card__header {
  font-family: var(--font-display);
  font-weight: 600;
  background: linear-gradient(180deg, #fff3f8, #ffe9f2);
}

/* ---- posts: avatar rail in mint, rounded avatars ---- */
.atm-postmeta { background: linear-gradient(180deg, #f2fcfa, #e6f8f5); }
.atm-avatar {
  border-radius: 14px;
  border-color: var(--forum-line-strong);
}
.atm-avatar__dot { border-color: #f2fcfa; }
.atm-postmeta__name { font-family: var(--font-display); font-weight: 600; font-size: 15px; }

/* ---- buttons: bubbly ---- */
.atm-btn { border-radius: 999px; font-weight: 700; }
.atm-btn--primary {
  background: linear-gradient(180deg, #7ae6dc, #4fd3c8);
  border-color: #2fb3a8;
}
.atm-btn--primary:hover:not(:disabled) { background: #34c3b7; }
.atm-btn--secondary { border-color: var(--forum-edge); }
.atm-btn--secondary:hover:not(:disabled) { background: #fff0f6; border-color: var(--forum-link); }
.atm-pager__btn { border-radius: 999px; }
.atm-pager__btn--active { border-color: #2fb3a8; }
.atm-chip, .atm-rank { border-radius: 999px; }
.atm-input, .atm-textarea, .atm-select {
  background: #fff;
  border-color: var(--forum-line-strong);
}

/* ---- tabs & breadcrumbs ---- */
.atm-tab--active { border-bottom-color: var(--forum-accent); }
.atm-crumbs__current { font-family: var(--font-display); font-weight: 500; }

/* ---- rich text ---- */
.atm-richtext blockquote,
.atm-prose blockquote { background: #f2fcfa; border-left-color: var(--forum-accent); }
.atm-headline mark { background: #d6f6f2; color: var(--forum-link); border-radius: 8px; }

/* ---- footer ---- */
.atm-webring__nav { border-radius: 999px; border-color: var(--forum-edge); }
.atm-webring__link:hover { background: #fff0f6; }
.atm-colophon__badge {
  border-radius: 999px;
  border-color: var(--forum-edge);
  color: var(--forum-link);
}