/* =====================================================================
   PinBoostr — Per-platform theming for the shared marketing templates
   (page-niche.php, page-listicle.php, page-comparison.php,
   page-cluster-article.php).

   Those templates were written for Pinterest and hard-code the rose/red
   Tailwind utilities. Rather than rewrite every class, this remaps the
   accent utilities under a [data-pbtheme] wrapper — the same technique
   retro-brand.css already uses for the warm palette, so the two layers
   behave predictably together.

   Adding a platform = one block of custom properties. Nothing here fires
   unless a template sets data-pbtheme, so Pinterest pages are untouched.
   ===================================================================== */

[data-pbtheme] {
  --pbp-ac: #ef4444;
  --pbp-ac-2: #db2777;
  --pbp-ac-ink: #b91c1c;
  --pbp-ac-50: #fef2f2;
  --pbp-ac-100: #fee2e2;
  --pbp-ac-200: #fecaca;
}

[data-pbtheme="linkedin"] {
  --pbp-ac: #0a66c2;
  --pbp-ac-2: #0a66c2;
  --pbp-ac-ink: #084d93;
  --pbp-ac-50: #eff6fc;
  --pbp-ac-100: #dbeafe;
  --pbp-ac-200: #bfdbfe;
}

/* ---- Hero wash ----
   The hero's base gradient is a Tailwind arbitrary value ending on a pink stop
   (#fff1f4), which no utility remap can reach. Every one of these templates
   puts its hero first inside the wrapper, so target that and swap the last
   stop for the platform's tint. */
[data-pbtheme="linkedin"] > section:first-of-type {
  background-image: linear-gradient(145deg, #ffffff 0%, #fbfdff 42%, #eef5fc 100%) !important;
}

/* ---- Text ---- */
[data-pbtheme] .text-red-400,
[data-pbtheme] .text-red-500,
[data-pbtheme] .text-red-600,
[data-pbtheme] .text-rose-500,
[data-pbtheme] .text-pink-600 { color: var(--pbp-ac) !important; }
[data-pbtheme] .group:hover .group-hover\:text-red-600,
[data-pbtheme] .hover\:text-red-600:hover { color: var(--pbp-ac-ink) !important; }
[data-pbtheme] .text-red-50 { color: var(--pbp-ac-50) !important; }
[data-pbtheme] .text-red-100 { color: var(--pbp-ac-100) !important; }

/* ---- Solid + gradient fills (buttons, chips, numbered badges) ---- */
[data-pbtheme] .bg-red-500,
[data-pbtheme] .bg-rose-500 { background-color: var(--pbp-ac) !important; }
[data-pbtheme] .bg-red-50 { background-color: var(--pbp-ac-50) !important; }
[data-pbtheme] .bg-red-100 { background-color: var(--pbp-ac-100) !important; }
[data-pbtheme] .hover\:bg-red-50:hover { background-color: var(--pbp-ac-50) !important; }

/* Gradients: collapse the red→pink ramp onto the platform accent. */
[data-pbtheme] .from-red-500 { --tw-gradient-from: var(--pbp-ac) var(--tw-gradient-from-position) !important; }
[data-pbtheme] .from-red-200 { --tw-gradient-from: var(--pbp-ac-200) var(--tw-gradient-from-position) !important; }
[data-pbtheme] .via-pink-100 { --tw-gradient-stops: var(--tw-gradient-from), var(--pbp-ac-100) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
[data-pbtheme] .via-pink-500 { --tw-gradient-stops: var(--tw-gradient-from), var(--pbp-ac-2) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
[data-pbtheme] .to-pink-600,
[data-pbtheme] .to-pink-500,
[data-pbtheme] .to-rose-500 { --tw-gradient-to: var(--pbp-ac-ink) var(--tw-gradient-to-position) !important; }

/* ---- Borders + rings ---- */
[data-pbtheme] .border-red-100 { border-color: var(--pbp-ac-100) !important; }
[data-pbtheme] .border-red-200 { border-color: var(--pbp-ac-200) !important; }
[data-pbtheme] .hover\:border-red-100:hover,
[data-pbtheme] .hover\:border-red-200:hover { border-color: var(--pbp-ac-200) !important; }
[data-pbtheme] .open\:border-red-200[open] { border-color: var(--pbp-ac-200) !important; }
[data-pbtheme] .ring-red-100 { --tw-ring-color: var(--pbp-ac-100) !important; }

/* ---- Shadows tinted with the accent ---- */
[data-pbtheme] .shadow-red-200\/70,
[data-pbtheme] .shadow-red-500\/20,
[data-pbtheme] .shadow-red-500\/25 { --tw-shadow-color: color-mix(in oklab, var(--pbp-ac) 35%, transparent) !important; --tw-shadow: var(--tw-shadow-colored) !important; }

/* retro-brand.css remaps .from-red-500/.to-pink-600 to the retro pink with
   !important too. This file is enqueued after it and matches on an extra
   attribute, so it wins on platform pages and stays out of the way elsewhere. */