/*
 * Planetmav palette for the Kubio / vertice front end.
 *
 * Every colour below is the one already running on the Planetmav site theme
 * (planetmav-native), read from its live stylesheet rather than re-picked by
 * eye. The point of the file is that the Feed keeps the same background, text
 * and accent as the rest of the site instead of the white Kubio default.
 *
 * This is a colour layer and nothing else. It changes no markup, no template,
 * no spacing and no type. Remove the class from <body> and the page renders
 * exactly as it did before.
 *
 * Scope: every rule sits under `body.pm-palette`, which the plugin adds only to
 * the views it is configured to cover. A view without that class is untouched
 * even though the stylesheet is in the page.
 */

/* ---------------------------------------------------------------------------
 * 1. Planetmav design tokens
 *
 * Source: planetmav-native/assets/style.css, dark palette (the block that wins).
 * ------------------------------------------------------------------------ */

body.pm-palette {
  --pm-canvas: #070d18;        /* page background                            */
  --pm-canvas-2: #122235;      /* the warm corner of the homepage glow       */
  --pm-surface: #111e30;       /* panels that have to stay dark              */
  --pm-ink: #edf5ff;           /* body text                                  */
  --pm-muted: #b9c9db;         /* secondary text                             */
  --pm-accent: #76e5e3;        /* links, buttons, hover                      */
  --pm-on-accent: #070d18;     /* text drawn on top of the accent            */
  --pm-line: #30465c;          /* borders and rules                          */
}

/* ---------------------------------------------------------------------------
 * 2. Kubio colour slots
 *
 * Kubio drives almost its whole stylesheet from six RGB triplets with five
 * variants each, so redefining them re-skins the theme without touching a
 * single block.
 *
 * Slots 5 and 6 are the theme's light and dark poles — Kubio pairs them, light
 * text on a slot-6 panel, dark text on a slot-5 panel. Going dark means
 * inverting *both* poles rather than repainting one of them, because then every
 * pairing Kubio already made stays legible by construction, including ones on
 * pages this file has never seen:
 *
 *     slot 5, the light pole (was #ffffff)  ->  Planetmav canvas #070d18
 *     slot 6, the dark pole  (was #1e1e1e)  ->  Planetmav ink    #edf5ff
 *
 * Slot 6's variant ramp is reversed for the same reason. Kubio orders variants
 * lightest to darkest, which on white means weakest to strongest; on a dark
 * canvas weakest means darkest, so the ramp runs the other way and
 * `--kubio-color-6-variant-4` (pagination numbers, de-emphasised by design)
 * stays de-emphasised instead of disappearing.
 *
 * Slots 2-4 keep their hues but adopt the Planetmav accent's saturation and
 * lightness (68%/68%), so the four accents read as one family rather than four
 * unrelated neons. All six bases clear WCAG AA against the canvas.
 * ------------------------------------------------------------------------ */

body.pm-palette {
  --kubio-color-1: 118, 229, 227;  /* primary    — Planetmav cyan */
  --kubio-color-2: 229, 181, 118;  /* secondary  — amber          */
  --kubio-color-3: 118, 229, 196;  /* tertiary   — mint           */
  --kubio-color-4: 146, 118, 229;  /* quaternary — violet         */
  --kubio-color-5: 7, 13, 24;      /* light pole, inverted — canvas */
  --kubio-color-6: 237, 245, 255;  /* dark pole, inverted  — ink    */

  --kubio-color-1-variant-1: 215, 247, 247;
  --kubio-color-1-variant-2: 166, 238, 237;
  --kubio-color-1-variant-3: 118, 229, 227;
  --kubio-color-1-variant-4: 65, 219, 216;
  --kubio-color-1-variant-5: 35, 187, 184;

  --kubio-color-2-variant-1: 247, 234, 215;
  --kubio-color-2-variant-2: 238, 207, 166;
  --kubio-color-2-variant-3: 229, 181, 118;
  --kubio-color-2-variant-4: 219, 153, 65;
  --kubio-color-2-variant-5: 187, 122, 35;

  --kubio-color-3-variant-1: 215, 247, 238;
  --kubio-color-3-variant-2: 166, 238, 217;
  --kubio-color-3-variant-3: 118, 229, 196;
  --kubio-color-3-variant-4: 65, 219, 174;
  --kubio-color-3-variant-5: 35, 187, 143;

  --kubio-color-4-variant-1: 224, 215, 247;
  --kubio-color-4-variant-2: 185, 166, 238;
  --kubio-color-4-variant-3: 146, 118, 229;
  --kubio-color-4-variant-4: 104, 65, 219;
  --kubio-color-4-variant-5: 74, 35, 187;

  /* light pole: canvas, then progressively away from the page */
  --kubio-color-5-variant-1: 7, 13, 24;
  --kubio-color-5-variant-2: 17, 30, 48;
  --kubio-color-5-variant-3: 29, 48, 73;
  --kubio-color-5-variant-4: 48, 70, 92;
  --kubio-color-5-variant-5: 74, 99, 124;

  /* dark pole, reversed: weakest readable tone up to full ink. The weakest
     stop is #7e94ab rather than a true mirror of Kubio's #e9e9e9, because a
     mirror lands at 1.5:1 on this canvas — Kubio's faint end has no room on a
     dark page. Every stop here clears AA. */
  --kubio-color-6-variant-1: 126, 148, 171;
  --kubio-color-6-variant-2: 148, 168, 188;
  --kubio-color-6-variant-3: 166, 184, 202;
  --kubio-color-6-variant-4: 185, 201, 219;
  --kubio-color-6-variant-5: 237, 245, 255;

  /* The one Kubio preset WordPress prints as a literal rather than a var. */
  --wp--preset--color--kubio-color-5-variant-2: #111e30;
}

/* ---------------------------------------------------------------------------
 * 3. Page canvas
 *
 * The same two-layer background the Planetmav homepage uses, so the Feed reads
 * as the same surface rather than a panel bolted onto the side of it.
 * ------------------------------------------------------------------------ */

body.pm-palette {
  background:
    radial-gradient(ellipse at 85% 12%, var(--pm-canvas-2) 0, transparent 38%),
    var(--pm-canvas);
  background-attachment: fixed;
  color: var(--pm-ink);
}

/* ---------------------------------------------------------------------------
 * 4. Structural patches
 *
 * Three groups, all of them cases the slot inversion cannot reach on its own:
 *
 *   a) surfaces Kubio hard-codes as white instead of routing through a slot;
 *   b) panels that deliberately used the dark pole *as a background* — under a
 *      clean inversion those turn light, which is right in theory and wrong for
 *      a site that is meant to read as dark throughout;
 *   c) text that sits on something which did not invert, i.e. over a photographic
 *      hero or over one of the panels forced back to dark in (b).
 *
 * These use `!important` deliberately. The rules being overridden are generated
 * per block instance — `.style-vP0mYzy99sE-outer` and friends — and those
 * hashes change whenever the page is re-saved in the Kubio editor, so winning
 * on specificity alone would be quietly fragile. Matching on stable structural
 * classes and forcing the value survives an editor round-trip.
 * ------------------------------------------------------------------------ */

/* --- (a) hard-coded light surfaces ------------------------------------- */

/* Sticky header: hard-coded #ffffff with a light drop shadow. */
body.pm-palette .wp-block-kubio-navigation-section__nav.h-navigation_sticky:not(.extra-1) {
  background-color: var(--pm-canvas) !important;
  border-bottom: 1px solid var(--pm-line) !important;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.45) !important;
}

/* Drop-down sub-menu: #ffffff on the panel and again on every link inside it. */
body.pm-palette .kubio-dropdown-menu li > ul {
  background-color: var(--pm-surface) !important;
  border: 1px solid var(--pm-line) !important;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.45) !important;
}

body.pm-palette .kubio-dropdown-menu li > ul > li > a {
  background-color: transparent !important;
  color: var(--pm-ink) !important;
  border-bottom-color: var(--pm-line) !important;
}

body.pm-palette .kubio-dropdown-menu li > ul > li > a:hover,
body.pm-palette .kubio-dropdown-menu li > ul > li > a.hover,
body.pm-palette .kubio-dropdown-menu li > ul > li.current-menu-item > a,
body.pm-palette .kubio-dropdown-menu li > ul > li.current_page_item > a {
  background-color: var(--pm-accent) !important;
  color: var(--pm-on-accent) !important;
}

/* Active-item marker: the `solid` variant is hard-coded white. */
body.pm-palette .kubio-dropdown-menu.solid-active-item > .kubio-menu > ul > li::before,
body.pm-palette .kubio-dropdown-menu.solid-active-item > .kubio-menu > ul > li::after,
body.pm-palette .kubio-dropdown-menu.bordered-active-item > .kubio-menu > ul > li::before,
body.pm-palette .kubio-dropdown-menu.bordered-active-item > .kubio-menu > ul > li::after {
  background-color: var(--pm-accent) !important;
}

/* Featured-image placeholder: hard-coded rgb(163,172,190), a light grey block
   300px tall behind every post that has no thumbnail. */
body.pm-palette .wp-block-kubio-post-featured-image__container {
  background-color: var(--pm-surface) !important;
}

/* Image caption: the vertice base stylesheet hard-codes #fff. */
body.pm-palette .wp-caption {
  background: var(--pm-surface);
  border-color: var(--pm-line);
}

/* `mark` is #ff0 on #000 in the base stylesheet. */
body.pm-palette mark {
  background: var(--pm-accent);
  color: var(--pm-on-accent);
}

/* --- (b) panels held dark on purpose ------------------------------------ */

body.pm-palette .wp-block-kubio-footer__container .wp-block-kubio-section__outer,
body.pm-palette #footer.wp-block-kubio-section__outer {
  background-color: var(--pm-surface) !important;
  border-top: 1px solid var(--pm-line) !important;
}

/* The mobile off-canvas panel is built by JavaScript at runtime, so it is
   matched on the id prefix Kubio generates from `data-target-id`, which is
   stable across editor saves. */
body.pm-palette [id^="kubio-offscreen-"],
body.pm-palette .wp-block-kubio-menu-offscreen__offscreen {
  background-color: var(--pm-surface) !important;
}

/* --- (c) text on something that did not invert -------------------------- */

/* The main navigation and the page title overlap the hero photograph by
   design (`overlap: true`), so their background is an image and never
   inverted. They were white; they stay light. */
body.pm-palette .kubio-dropdown-menu > .kubio-menu > ul > li > a,
body.pm-palette .pll-switcher-label,
body.pm-palette .wp-block-kubio-page-title__container,
body.pm-palette .wp-block-kubio-page-title__container a {
  color: var(--pm-ink) !important;
}

body.pm-palette .kubio-dropdown-menu > .kubio-menu > ul > li > a:hover,
body.pm-palette .kubio-dropdown-menu > .kubio-menu > ul > li.current-menu-item > a,
body.pm-palette .kubio-dropdown-menu > .kubio-menu > ul > li.current_page_item > a {
  color: var(--pm-accent) !important;
}

/* Everything inside the two panels forced back to dark above. */
body.pm-palette .wp-block-kubio-footer__container,
body.pm-palette .wp-block-kubio-footer__container p,
body.pm-palette .wp-block-kubio-footer__container span,
body.pm-palette .wp-block-kubio-footer__container .wp-block-kubio-text__text,
body.pm-palette [id^="kubio-offscreen-"],
body.pm-palette [id^="kubio-offscreen-"] a,
body.pm-palette [id^="kubio-offscreen-"] span {
  color: var(--pm-ink) !important;
}

body.pm-palette .wp-block-kubio-footer__container a:hover {
  color: var(--pm-accent) !important;
}

/* In the off-canvas menu the hovered and current items are given the accent as
   a *background* rather than as a text colour, so there the readable choice is
   the dark on-accent tone, not the accent itself. Kubio applied white here,
   which was already marginal against the old blue. */
body.pm-palette [id^="kubio-offscreen-"] .kubio-menu li > a:hover,
body.pm-palette [id^="kubio-offscreen-"] .kubio-menu li > a.hover,
body.pm-palette [id^="kubio-offscreen-"] .kubio-menu li.current-menu-item > a,
body.pm-palette [id^="kubio-offscreen-"] .kubio-menu li.current_page_item > a,
body.pm-palette [id^="kubio-offscreen-"] .kubio-menu li.current-menu-item > a span,
body.pm-palette [id^="kubio-offscreen-"] .kubio-menu li.current_page_item > a span {
  color: var(--pm-on-accent) !important;
}

/* ---------------------------------------------------------------------------
 * 5. Controls
 *
 * Kubio routes form fields through the light pole, which is now the canvas, so
 * an input would be invisible against the page it sits on. Lift them to the
 * surface tone. Colour only — no size, spacing or radius is touched.
 * ------------------------------------------------------------------------ */

body.pm-palette input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
body.pm-palette textarea,
body.pm-palette select {
  background-color: var(--pm-surface) !important;
  color: var(--pm-ink) !important;
  border-color: var(--pm-line) !important;
}

body.pm-palette ::placeholder {
  color: var(--pm-muted);
  opacity: 1;
}

/* The site's focus ring, so keyboard users get the same affordance here. */
body.pm-palette a:focus-visible,
body.pm-palette button:focus-visible,
body.pm-palette input:focus-visible,
body.pm-palette select:focus-visible,
body.pm-palette textarea:focus-visible,
body.pm-palette summary:focus-visible,
body.pm-palette [tabindex]:focus-visible {
  outline: 3px solid var(--pm-accent) !important;
  outline-offset: 5px;
}

/* Pagination picks up the accent on hover, as links do on the site. */
body.pm-palette .wp-block-kubio-pagination-numbers__outer .page-numbers:hover {
  color: var(--pm-accent) !important;
}

/* Rules and separators. */
body.pm-palette hr,
body.pm-palette .wp-block-separator {
  border-color: var(--pm-line);
  color: var(--pm-line);
}