/* ================================================================
   My About Card & Stack Pill Blocks — style.css  (frontend)
   Works on BOTH light and dark WordPress themes via CSS
   custom properties + prefers-color-scheme + .is-dark-theme.

   Blocks     : mab-about-card | mab-stack-pill
   Variations : default | warning | success | info
   ================================================================ */


/* ── 1. DESIGN TOKENS — Light theme (default) ─────────────────── */

:root {
  /* Surfaces */
  --mab-card-bg          : #ffffff;
  --mab-card-bg-hover    : #f8f9fb;
  --mab-card-border      : #e2e6ed;
  --mab-card-border-hover: #94a3b8;
  --mab-card-radius      : 10px;
  --mab-card-shadow      : 0 1px 4px rgba(0,0,0,.06);
  --mab-card-shadow-hover: 0 4px 16px rgba(0,0,0,.10);

  /* Typography */
  --mab-heading-color    : #1e2333;
  --mab-body-color       : #4b5468;
  --mab-icon-size        : 1.6rem;

  /* Pill */
  --mab-pill-bg          : #f1f4f8;
  --mab-pill-bg-hover    : #e8edf5;
  --mab-pill-border      : #dde2eb;
  --mab-pill-border-hover: #94a3b8;
  --mab-pill-label-color : #4b5468;
  --mab-pill-label-hover : #1e2333;
  --mab-pill-radius      : 8px;

  /* Badge inside pill */
  --mab-badge-bg         : #e2e6ed;
  --mab-badge-color      : #374151;
  --mab-badge-radius     : 5px;

  /* Variation palettes — light */
  /* default */
  --mab-default-accent   : #3b82f6;
  --mab-default-icon-bg  : #eff6ff;
  --mab-default-icon-fg  : #1d4ed8;
  --mab-default-badge-bg : #dbeafe;
  --mab-default-badge-fg : #1e40af;

  /* warning */
  --mab-warning-accent   : #f59e0b;
  --mab-warning-icon-bg  : #fffbeb;
  --mab-warning-icon-fg  : #b45309;
  --mab-warning-badge-bg : #fef3c7;
  --mab-warning-badge-fg : #92400e;

  /* success */
  --mab-success-accent   : #22c55e;
  --mab-success-icon-bg  : #f0fdf4;
  --mab-success-icon-fg  : #15803d;
  --mab-success-badge-bg : #dcfce7;
  --mab-success-badge-fg : #166534;

  /* info */
  --mab-info-accent      : #8b5cf6;
  --mab-info-icon-bg     : #f5f3ff;
  --mab-info-icon-fg     : #6d28d9;
  --mab-info-badge-bg    : #ede9fe;
  --mab-info-badge-fg    : #5b21b6;

  /* red */
  --mab-red-accent       : #ef4444;
  --mab-red-icon-bg      : #fff1f2;
  --mab-red-icon-fg      : #b91c1c;
  --mab-red-badge-bg     : #fee2e2;
  --mab-red-badge-fg     : #991b1b;
}


/* ── 2. DESIGN TOKENS — Dark theme ────────────────────────────── */

@media ( prefers-color-scheme: dark ) {
  :root {
    --mab-card-bg          : #1c2031;
    --mab-card-bg-hover    : #212640;
    --mab-card-border      : #2d3350;
    --mab-card-border-hover: #4b5580;
    --mab-card-shadow      : 0 1px 4px rgba(0,0,0,.25);
    --mab-card-shadow-hover: 0 4px 20px rgba(0,0,0,.35);

    --mab-heading-color    : #e2e6f0;
    --mab-body-color       : #8892aa;

    --mab-pill-bg          : #1c2031;
    --mab-pill-bg-hover    : #242a42;
    --mab-pill-border      : #2d3350;
    --mab-pill-border-hover: #4b5580;
    --mab-pill-label-color : #8892aa;
    --mab-pill-label-hover : #e2e6f0;

    --mab-badge-bg         : #2d3350;
    --mab-badge-color      : #a8b4cc;

    /* default */
    --mab-default-icon-bg  : rgba(59,130,246,.15);
    --mab-default-icon-fg  : #60a5fa;
    --mab-default-badge-bg : rgba(59,130,246,.18);
    --mab-default-badge-fg : #93c5fd;

    /* warning */
    --mab-warning-icon-bg  : rgba(245,158,11,.15);
    --mab-warning-icon-fg  : #fbbf24;
    --mab-warning-badge-bg : rgba(245,158,11,.18);
    --mab-warning-badge-fg : #fcd34d;

    /* success */
    --mab-success-icon-bg  : rgba(34,197,94,.13);
    --mab-success-icon-fg  : #4ade80;
    --mab-success-badge-bg : rgba(34,197,94,.16);
    --mab-success-badge-fg : #86efac;

    /* info */
    --mab-info-icon-bg     : rgba(139,92,246,.15);
    --mab-info-icon-fg     : #a78bfa;
    --mab-info-badge-bg    : rgba(139,92,246,.18);
    --mab-info-badge-fg    : #c4b5fd;

    /* red */
    --mab-red-icon-bg      : rgba(239,68,68,.14);
    --mab-red-icon-fg      : #f87171;
    --mab-red-badge-bg     : rgba(239,68,68,.18);
    --mab-red-badge-fg     : #fca5a5;
  }
}

/* WordPress "Twenty Twenty-Four" and other themes that add
   .is-dark-theme to <html> or <body> instead of relying on
   prefers-color-scheme — mirror the dark tokens here. */
.is-dark-theme {
  --mab-card-bg          : #1c2031;
  --mab-card-bg-hover    : #212640;
  --mab-card-border      : #2d3350;
  --mab-card-border-hover: #4b5580;
  --mab-card-shadow      : 0 1px 4px rgba(0,0,0,.25);
  --mab-card-shadow-hover: 0 4px 20px rgba(0,0,0,.35);
  --mab-heading-color    : #e2e6f0;
  --mab-body-color       : #8892aa;
  --mab-pill-bg          : #1c2031;
  --mab-pill-bg-hover    : #242a42;
  --mab-pill-border      : #2d3350;
  --mab-pill-border-hover: #4b5580;
  --mab-pill-label-color : #8892aa;
  --mab-pill-label-hover : #e2e6f0;
  --mab-badge-bg         : #2d3350;
  --mab-badge-color      : #a8b4cc;
  --mab-default-icon-bg  : rgba(59,130,246,.15);
  --mab-default-icon-fg  : #60a5fa;
  --mab-default-badge-bg : rgba(59,130,246,.18);
  --mab-default-badge-fg : #93c5fd;
  --mab-warning-icon-bg  : rgba(245,158,11,.15);
  --mab-warning-icon-fg  : #fbbf24;
  --mab-warning-badge-bg : rgba(245,158,11,.18);
  --mab-warning-badge-fg : #fcd34d;
  --mab-success-icon-bg  : rgba(34,197,94,.13);
  --mab-success-icon-fg  : #4ade80;
  --mab-success-badge-bg : rgba(34,197,94,.16);
  --mab-success-badge-fg : #86efac;
  --mab-info-icon-bg     : rgba(139,92,246,.15);
  --mab-info-icon-fg     : #a78bfa;
  --mab-info-badge-bg    : rgba(139,92,246,.18);
  --mab-info-badge-fg    : #c4b5fd;
  --mab-red-icon-bg      : rgba(239,68,68,.14);
  --mab-red-icon-fg      : #f87171;
  --mab-red-badge-bg     : rgba(239,68,68,.18);
  --mab-red-badge-fg     : #fca5a5;
}


/* ════════════════════════════════════════════════════════════════
   BLOCK: ABOUT CARD
   ════════════════════════════════════════════════════════════════ */

.mab-about-card {
  background    : var(--mab-card-bg);
  border        : 1px solid var(--mab-card-border);
  border-radius : var(--mab-card-radius);
  padding       : 1.5rem;
  box-shadow    : var(--mab-card-shadow);
  transition    : border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
  position      : relative;
  overflow      : hidden;
  margin-bottom : 16px;
  /* margin handled by WordPress block spacing */
}

.mab-about-card:hover {
  border-color  : var(--mab-card-border-hover);
  box-shadow    : var(--mab-card-shadow-hover);
  background    : var(--mab-card-bg-hover);
  transform     : translateY(-2px);
}

/* Subtle left-edge accent line */
.mab-about-card::before {
  content       : '';
  position      : absolute;
  inset-block   : 0;
  inset-inline-start: 0;
  width         : 3px;
  border-radius : var(--mab-card-radius) 0 0 var(--mab-card-radius);
  opacity       : 0;
  transition    : opacity .2s ease;
}

.mab-about-card::before { opacity: 1; }

/* ── Icon ──────────────────────────────────────────────────────── */
.mab-about-card__icon {
  display       : inline-flex;
  align-items   : center;
  justify-content: center;
  width         : 2.6rem;
  height        : 2.6rem;
  border-radius : 9px;
  font-size     : var(--mab-icon-size);
  line-height   : 1;
  margin-bottom : .875rem;
  /* color vars set per variation below */
  background    : var(--mab-badge-bg);
  transition    : background .2s;
}

/* ── Heading ───────────────────────────────────────────────────── */
.mab-about-card__heading {
  font-size     : 1.05rem !important;
  font-weight   : 600 !important;
  line-height   : 1.35 !important;
  color         : var(--mab-heading-color) !important;
  margin-top    : 0 !important;
  margin-bottom : .5rem !important;
}

/* ── Content ───────────────────────────────────────────────────── */
.mab-about-card__content {
  font-size     : .9rem;
  line-height   : 1.65;
  color         : var(--mab-body-color);
}

.mab-about-card__content p { margin-bottom: .5rem; }
.mab-about-card__content p:last-child { margin-bottom: 0; }


/* ── Variation: DEFAULT (blue) ─────────────────────────────────── */
.mab-about-card--default::before { background: var(--mab-default-accent); }
.mab-about-card--default .mab-about-card__icon {
  background: var(--mab-default-icon-bg);
  color     : var(--mab-default-icon-fg);
}
.mab-about-card--default { border-color: var(--mab-default-accent); }

/* ── Variation: WARNING (amber) ────────────────────────────────── */
.mab-about-card--warning::before { background: var(--mab-warning-accent); }
.mab-about-card--warning .mab-about-card__icon {
  background: var(--mab-warning-icon-bg);
  color     : var(--mab-warning-icon-fg);
}
.mab-about-card--warning { border-color: var(--mab-warning-accent); }

/* ── Variation: SUCCESS (green) ────────────────────────────────── */
.mab-about-card--success::before { background: var(--mab-success-accent); }
.mab-about-card--success .mab-about-card__icon {
  background: var(--mab-success-icon-bg);
  color     : var(--mab-success-icon-fg);
}
.mab-about-card--success { border-color: var(--mab-success-accent); }

/* ── Variation: INFO (purple) ──────────────────────────────────── */
.mab-about-card--info::before { background: var(--mab-info-accent); }
.mab-about-card--info .mab-about-card__icon {
  background: var(--mab-info-icon-bg);
  color     : var(--mab-info-icon-fg);
}
.mab-about-card--info { border-color: var(--mab-info-accent); }

/* ── Variation: RED ────────────────────────────────────────────── */
.mab-about-card--red::before { background: var(--mab-red-accent); }
.mab-about-card--red .mab-about-card__icon {
  background: var(--mab-red-icon-bg);
  color     : var(--mab-red-icon-fg);
}
.mab-about-card--red { border-color: var(--mab-red-accent); }

/* ── Link wrapper — about-card ─────────────────────────────────── */
/* The <a> lives inside .mab-about-card when a URL is set.          */
.mab-about-card--linked { cursor: pointer; }

.mab-about-card--linked .mab-block-link {
  display         : block;
  text-decoration : none;
  color           : inherit;
  /* stretch to fill the card padding area */
  margin          : -1.5rem;
  padding         : 1.5rem;
  border-radius   : var(--mab-card-radius);
  outline         : none;
}

.mab-about-card--linked .mab-block-link:focus-visible {
  box-shadow: 0 0 0 3px var(--mab-default-accent);
}

/* Heading colour stays readable when card is a link */
.mab-about-card--linked .mab-about-card__heading { color: var(--mab-heading-color) !important; }


/* ════════════════════════════════════════════════════════════════
   BLOCK: STACK PILL
   ════════════════════════════════════════════════════════════════ */

.mab-stack-pill {
  display       : inline-flex;
  align-items   : center;
  gap           : .55rem;
  background    : var(--mab-pill-bg);
  border        : 1px solid var(--mab-pill-border);
  border-radius : var(--mab-pill-radius);
  padding       : .55rem .9rem;
  cursor        : default;
  transition    : all .2s ease;
  /* inline-block so pills wrap naturally in a flex/grid parent */
  max-width     : 100%;
}

.mab-stack-pill:hover {
  background    : var(--mab-pill-bg-hover);
  border-color  : var(--mab-pill-border-hover);
  transform     : translateY(-1px);
}

/* ── Badge abbreviation ──────────────────────────────────────── */
.mab-stack-pill__badge {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  min-width      : 2rem;
  height         : 1.5rem;
  padding        : 0 .4rem;
  border-radius  : var(--mab-badge-radius);
  font-size      : .7rem;
  font-weight    : 600;
  letter-spacing : .04em;
  line-height    : 1;
  white-space    : nowrap;
  /* Defaults — overridden per variation */
  background     : var(--mab-badge-bg);
  color          : var(--mab-badge-color);
  font-family    : ui-monospace, 'Fira Code', 'Cascadia Code', monospace;
}

/* ── Label ───────────────────────────────────────────────────── */
.mab-stack-pill__label {
  font-size   : .85rem;
  font-weight : 500;
  color       : var(--mab-pill-label-color);
  white-space : normal;
  transition  : color .2s;
  line-height : 1.2;
}

.mab-stack-pill:hover .mab-stack-pill__label {
  color: var(--mab-pill-label-hover);
}

/* ── Pill variation: DEFAULT ─────────────────────────────────── */
.mab-stack-pill--default:hover { border-color: var(--mab-default-accent); }
.mab-stack-pill--default .mab-stack-pill__badge {
  background: var(--mab-default-badge-bg);
  color:      var(--mab-default-badge-fg);
}

/* ── Pill variation: WARNING ─────────────────────────────────── */
.mab-stack-pill--warning:hover { border-color: var(--mab-warning-accent); }
.mab-stack-pill--warning .mab-stack-pill__badge {
  background: var(--mab-warning-badge-bg);
  color:      var(--mab-warning-badge-fg);
}

/* ── Pill variation: SUCCESS ─────────────────────────────────── */
.mab-stack-pill--success:hover { border-color: var(--mab-success-accent); }
.mab-stack-pill--success .mab-stack-pill__badge {
  background: var(--mab-success-badge-bg);
  color:      var(--mab-success-badge-fg);
}

/* ── Pill variation: INFO ────────────────────────────────────── */
.mab-stack-pill--info:hover { border-color: var(--mab-info-accent); }
.mab-stack-pill--info .mab-stack-pill__badge {
  background: var(--mab-info-badge-bg);
  color:      var(--mab-info-badge-fg);
}

/* ── Pill variation: RED ─────────────────────────────────────── */
.mab-stack-pill--red:hover { border-color: var(--mab-red-accent); }
.mab-stack-pill--red .mab-stack-pill__badge {
  background: var(--mab-red-badge-bg);
  color:      var(--mab-red-badge-fg);
}

/* ── Link wrapper — stack-pill ───────────────────────────────── */
/* When linked the pill IS the <a> element (rendered directly).  */
a.mab-stack-pill {
  text-decoration : none;
  cursor          : pointer;
}

a.mab-stack-pill:focus-visible {
  outline       : 2px solid var(--mab-default-accent);
  outline-offset: 2px;
}

/* Linked about-card: use variation accent for focus ring */
.mab-about-card--red    .mab-block-link:focus-visible { box-shadow: 0 0 0 3px var(--mab-red-accent); }
.mab-about-card--warning .mab-block-link:focus-visible { box-shadow: 0 0 0 3px var(--mab-warning-accent); }
.mab-about-card--success .mab-block-link:focus-visible { box-shadow: 0 0 0 3px var(--mab-success-accent); }
.mab-about-card--info    .mab-block-link:focus-visible { box-shadow: 0 0 0 3px var(--mab-info-accent); }

/* Linked stack-pill: variation accent for focus ring */
a.mab-stack-pill--red:focus-visible     { outline-color: var(--mab-red-accent); }
a.mab-stack-pill--warning:focus-visible { outline-color: var(--mab-warning-accent); }
a.mab-stack-pill--success:focus-visible { outline-color: var(--mab-success-accent); }
a.mab-stack-pill--info:focus-visible    { outline-color: var(--mab-info-accent); }


/* ════════════════════════════════════════════════════════════════
   GRID HELPER CLASS
   Wrap multiple About Cards or Stack Pills in a
   wp:group with className "mab-card-grid" or "mab-pill-grid"
   for automatic responsive layouts.
   ════════════════════════════════════════════════════════════════ */

.mab-card-grid {
  display               : grid;
  grid-template-columns : repeat( auto-fit, minmax( 220px, 1fr ) );
  gap                   : 1rem;
}

body .mab-pill-grid {
  display   : flex;
  flex-wrap : wrap;
  gap       : .6rem;
  margin-bottom: 24px;
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media ( max-width: 480px ) {
  .mab-about-card {
    padding: 1.1rem 1.1rem 1.25rem;
  }
  .mab-stack-pill {
    padding: .45rem .75rem;
  }
}