/*
 * Myco‑Emporium Global Care Styles
 *
 * This stylesheet defines a reusable palette and common patterns used
 * throughout Myco‑Emporium care guides.  Import this once via the
 * plugin and apply classes like `.me-care` and `.me-care.block`
 * directly in your HTML.  Animations respect reduced motion settings.
 */

/* Accent palette variables */
:root {
  --bg:     #0D0D15;
  --ink:    #EAEAEA;
  --accent1:#00F0FF;
  --accent2:#9D00E4;
  --ok:     #49ED49;
}

/* Base care container: sets font and default text colour */
.me-care {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
}

/* Standard h2 styling used in care blocks */
.me-care h2 {
  margin: 0 0 18px;
  font-size: 28px;
  line-height: 1.2;
  color: var(--accent1);
  text-shadow: 0 0 8px rgba(0,240,255,.6);
}

/* Animated borderflow keyframes.  Used for highlighting
 * components such as fast facts. */
@keyframes borderflow {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* Base styling for care blocks.  The `.block` class can be
 * appended to `.me-care` to enable card styling and interior glow. */
.me-care.block {
  position: relative;
  background: var(--bg);
  border: 1px solid #232336;
  border-radius: 18px;
  box-shadow:
    0 0 22px rgba(0,240,255,.10) inset,
    0 12px 24px rgba(0,0,0,.35);
  overflow: hidden;
}

/* Optional intro vignette: apply `.intro` to a block to
 * add large radial gradients in the corners. */
.me-care.block.intro::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(1000px 1000px at -10% -10%, rgba(0,240,255,.09), transparent 60%),
    radial-gradient(900px 900px at 110% 110%, rgba(157,0,228,.09), transparent 60%);
  mix-blend-mode: screen;
}

/* Fast facts container: inner wrapper for lists.  We give a slight
 * inset border and glow. */
.me-care.block.fast-facts .care-fastfacts {
  background: var(--bg);
  color: var(--ink);
  border-radius: 18px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  border: 1px solid #232336;
  box-shadow: 0 0 18px rgba(0,240,255,.15) inset;
}

/* Animated border for fast facts.  The mask technique ensures the
 * gradient appears only around the border. */
.me-care.block.fast-facts .care-fastfacts:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg,var(--accent1),var(--accent2),var(--accent1));
  background-size: 400% 400%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderflow 12s linear infinite;
}

/* Unordered list layout for fast facts.  Uses CSS grid for responsive
 * behaviour. */
.me-care.block.fast-facts ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

/* Individual fast fact entry */
.me-care.block.fast-facts li {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(0,240,255,.25);
  border-radius: 12px;
  padding: 12px 14px;
  transition: .3s ease;
  position: relative;
}

.me-care.block.fast-facts li:hover {
  border-color: var(--accent2);
  box-shadow: 0 0 12px rgba(157,0,228,.6);
  transform: translateY(-2px);
}

/* Highlight the label within a fact */
.me-care.block.fast-facts li strong {
  color: var(--accent1);
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  text-shadow: 0 0 6px rgba(0,240,255,.4);
}

/* Simple card utility.  Use .me-care .card for generic panels */
.me-care .card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(0,240,255,.22);
  border-radius: 14px;
  padding: 14px;
}

/* When the user prefers reduced motion, disable the animated
 * borderflow to reduce CPU usage and potential eye strain. */
@media (prefers-reduced-motion: reduce) {
  .me-care.block.fast-facts .care-fastfacts:before {
    animation: none;
  }
}