/* More than my allowance. — AK's section.
 *
 * Loaded after market.css and MoreThanMy's theme.css, and only on this
 * section's own pages (website.py decides; see `_section_css`). So this file
 * assumes the editorial theme is already in force and changes it, rather than
 * standing on its own — everything structural is inherited untouched.
 *
 * The look, against the rest of the site: MoreThanMy is peach paper, mauve ink
 * and a gold hairline — a magazine. This is the opposite end of the same house:
 * near-black violet ground lit by neon blue, pink and purple. The point is not
 * decoration. AK reviews what a kid can actually afford, and a section that
 * looked like her grandmother's would quietly tell readers it was written by
 * her grandmother.
 *
 * Two rules kept it from becoming a headache. Neon is used on *lines, labels
 * and edges* — never behind a paragraph; body copy stays lilac-white on the
 * dark ground at full contrast. And the glow is a shadow, never a text colour,
 * so turning it off cannot take legibility with it.
 *
 * Fonts are OFL and Google-hosted, the same terms as the theme's.
 */

@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;1,600&display=swap');

:root {
  /* The three neons, plus the two grounds they sit on. Named once here; every
     rule below refers to these rather than repeating a hex. */
  --ak-blue:   #22E0FF;
  --ak-pink:   #FF3DA6;
  --ak-purple: #B14CFF;
  --ak-void:   #0B0614;   /* page ground */
  --ak-deep:   #150B24;   /* masthead, footer, panels */

  /* Mapped onto the properties market.css exposes. --mk-ink is the light value
     now, because the base uses it as a foreground; the handful of places the
     base uses it as a *background* are overridden by name further down, which
     is the whole cost of inverting a stylesheet written for paper. */
  --mk-paper: var(--ak-void);
  --mk-ink:   #F4ECFF;
  --mk-g1:    #E8DEFA;   /* body text */
  --mk-g2:    #BCA9DE;   /* muted */
  --mk-g3:    #9B86C4;   /* small-caps, captions */
  --mk-g4:    #2E1B49;   /* hairlines, gridlines */
  --mk-g5:    #180D28;   /* panel fill */

  /* The theme centralises its accent in --mk-gold: the nav rule, every
     uppercase micro-label, link underlines, badges, the buy and listen
     buttons. Re-pointing that one property moves the whole accent system to
     neon pink without restating any of those rules. */
  --mk-gold:  var(--ak-pink);

  --mk-sans:    "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mk-display: "Fredoka", "Nunito", sans-serif;
  --mk-display-weight: 600;
  --mk-display-spacing: -0.01em;
  --mk-script:  "Nunito", Georgia, serif;   /* the theme sets the slope; Nunito has a true italic */
}

body { font-weight: 400; }

/* Headings carry the glow. Colour stays near-white so the text is legible with
   shadows disabled; the neon is entirely in the shadow. */
h1, h2, h3 { color: #FFFFFF; text-shadow: 0 0 18px rgba(177, 76, 255, 0.55); }
.mk-hero h1 { font-weight: 700; text-shadow: 0 0 26px rgba(255, 61, 166, 0.5), 0 0 60px rgba(34, 224, 255, 0.28); }
.mk-hero p { color: var(--mk-g2); }

/* ------------------------------------------------- the inverted backgrounds */
/* Every place market.css or theme.css paints --mk-ink as a *fill*. Left alone,
   these would be light-on-light the moment --mk-ink became the text colour. */

.mk-mast, .mk-foot { background: var(--ak-deep); }
.mk-ticker { background: var(--ak-deep); border-bottom-color: var(--ak-pink); }
/* The strip paints its own text with --mk-paper, because on paper-and-ink that
   IS the light colour sitting on the dark ink band. Inverting the palette made
   it the ground, so every product name went dark on dark and the ticker read as
   an empty bar. Third place --mk-paper is used as a foreground rather than a
   fill, and the last one found -- my contrast audit missed it because the
   preview harness had no ticker markup to audit. */
.mk-ticker, .mk-ticker-label, .mk-ticker-list a { color: var(--mk-g1); }
.mk-ticker-label { color: var(--ak-blue); opacity: 1; }
.mk-ticker-list a:hover { color: #FFFFFF; }
.mk-ticker-move.is-up { color: #5BE7A9; }
.mk-ticker-move.is-down { color: #FF7A9C; }
.mk-verdict { background: var(--ak-deep); border-left-color: var(--ak-blue); }
.mk-verdict-text { color: var(--ak-blue); }
/* `.mk-badge` and its modifiers are all one class deep, so source order is the
   only thing separating them — base first, modifiers after. Stated here rather
   than left to chance: the outline badge was winning over the solid one and
   painting neon blue text on a neon pink field. */
.mk-badge { border-color: var(--ak-blue); color: var(--ak-blue); }
.mk-badge--muted { border-color: var(--ak-purple); color: var(--mk-g2); }
.mk-badge--solid { background: var(--ak-pink); border-color: var(--ak-pink); color: var(--ak-void); }
.mk-buy--solid { background: var(--ak-pink); border-color: var(--ak-pink); color: var(--ak-void); }
.mk-buy--solid:hover { background: none; color: var(--ak-pink); }
.mk-buy:hover { background: var(--ak-pink); border-color: var(--ak-pink); color: var(--ak-void); }
.mk-listen:hover { background: var(--ak-pink); color: var(--ak-void); }
.mk-sub-form button {
  background: var(--ak-pink);
  border-color: var(--ak-pink);
  color: var(--ak-void);
  font-weight: 700;
}
.mk-sub-form button:hover { background: var(--ak-purple); border-color: var(--ak-purple); }
.mk-share a:hover, .mk-share-copy:hover {
  background: var(--ak-blue);
  border-color: var(--ak-blue);
  color: var(--ak-void);
}
.mk-sub-form input[type=email], .mk-share a, .mk-share-copy {
  background: var(--ak-deep);
  border-color: var(--ak-purple);
  color: var(--mk-g1);
}
.mk-sub { background: var(--ak-deep); }

/* --------------------------------------------------------------- the neons */
/* All three colours earn a job rather than taking turns: blue is the link,
   pink is the accent and the ask, purple is structure and glow. */

a { color: var(--ak-blue); text-decoration-color: var(--ak-pink); }
a:hover { color: var(--ak-pink); }
.mk-nav-list a:hover, .mk-card a:hover .mk-card-title { color: var(--ak-blue); }
.mk-foot-col a:hover, .mk-foot-contact a:hover { color: var(--ak-blue) !important; }
.mk-foot-head, .mk-foot-legal, .mk-foot-contact a { color: var(--mk-g3); }
.mk-foot a, .mk-foot-col a { color: var(--mk-g2); }
.mk-foot-disc, .mk-foot-bar { border-color: rgba(177, 76, 255, 0.28); }

/* The nav rule is the one place the three run together — the section's
   signature, and the only gradient in the file. */
.mk-nav {
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--ak-blue), var(--ak-purple), var(--ak-pink)) 1;
  background: var(--ak-void);
}

.mk-quote { border-left-color: var(--ak-purple); color: var(--mk-ink); }
.mk-cat-hero {
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--ak-pink), var(--ak-purple), var(--ak-blue)) 1;
  background: var(--ak-void);
}
.mk-cat-hero-head { color: #FFFFFF; text-shadow: 0 0 22px rgba(255, 61, 166, 0.5); }

/* The section mark, above the cover line. Placed from CSS rather than the
   template because it belongs to this one section and the template serves all
   ten -- the same reasoning that keeps this whole file out of the market theme.
   Decorative, so it is a background on a pseudo-element and carries no alt
   text: the heading beneath it already says which section this is. */
.mk-cat-hero-text::before {
  content: "";
  display: block;
  width: 84px;
  height: 84px;
  margin: 0 auto 18px;
  background: url("/assets/sublunary/markets/morethanmy/sections/allowance-avatar.svg") center / contain no-repeat;
}
.mk-cat-hero-intro { font-style: italic; color: var(--mk-g2); }

/* Cards: a violet gridline, and a hover that lights the edge instead of
   changing the fill — on a dark ground a fill change reads as a page repaint. */
.mk-grid, #blog-list.blog-list { background: var(--mk-g4); border-color: var(--mk-g4); }
.mk-card, .blog-card .card { background: var(--ak-void); }
.mk-card:hover, .blog-card .card:hover {
  background: var(--ak-deep);
  box-shadow: inset 0 0 0 1px rgba(34, 224, 255, 0.45);
}

/* ------------------------------------------------------------ page texture */
/* The theme hangs a peach botanical behind the reading column. It is loaded by
   a selector this file cannot unhook, so the image is replaced rather than
   removed: two soft neon pools, pure CSS, no request. Same mask as the theme's,
   so it clears the page as you read down. */
body[data-path^="blog"]::before {
  background:
    radial-gradient(60% 42% at 14% 6%,  rgba(34, 224, 255, 0.30), transparent 70%),
    radial-gradient(56% 40% at 88% 16%, rgba(255, 61, 166, 0.28), transparent 70%),
    radial-gradient(70% 48% at 50% 0%,  rgba(177, 76, 255, 0.26), transparent 72%);
  opacity: 1;
}

/* Reduced transparency and forced colours both mean "stop decorating". Drop the
   glow and the pools; the palette underneath is already high-contrast. */
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  h1, h2, h3, .mk-hero h1, .mk-cat-hero-head { text-shadow: none; }
  body[data-path^="blog"]::before { display: none; }
}