/* Dark mode palette and the header Light / Dark / System switch.
   Pairs with partials/wootware-theme-switch.hbs. Moved from Ghost's site-wide
   code injection on 2026-10-23. */
  /* Storefront dark palette (zinc ladder, see app/assets/css/globals.css):
     page #09090b, surface #18181b, surface-2 #27272a, line #3f3f46. */
  html[data-theme="dark"] {
    color-scheme: dark;
    --color-primary-text: #d4d4d8;
    --primary-text-color: #d4d4d8;
    --color-secondary-text: #a1a1aa;
    --secondary-text-color: #a1a1aa;
    --color-darker-gray: #fafafa;
    --darker-gray-color: #fafafa;
    --color-lighter-gray: #18181b;
    --color-light-gray: #3f3f46;
    --light-gray-color: #27272a;
    --color-mid-gray: #52525b;
    --background-color: #18181b;
  }
  html[data-theme="dark"] body {
    background-color: #09090b;
  }
  html[data-theme="dark"] body:not(.post-template):not(.page-template) {
    background-image: linear-gradient(0deg, #18181b 65%, #09090b);
  }
  /* The open mobile menu: the theme paints it white with
     `.is-head-open:not(.is-head-brand):not(.is-head-dark):not(.is-head-transparent) #gh-head`,
     so match that specificity or the dark nav text lands on white. */
  html[data-theme="dark"] .gh-head,
  html[data-theme="dark"]
    .is-head-open:not(.is-head-brand):not(.is-head-dark):not(.is-head-transparent)
    #gh-head,
  html[data-theme="dark"] .is-head-open #gh-head .gh-head-actions {
    background-color: #09090b;
  }
  /* The uploaded logo has a dark "woot" wordmark; swap in the storefront's
     dark-mode logo (white "woot") without touching the theme's markup. */
  html[data-theme="dark"] .gh-head-logo {
    background: url("https://www.wootware.co.za/logo-dark.svg") no-repeat left center / contain;
  }
  html[data-theme="dark"] .gh-head-logo img {
    visibility: hidden;
  }
  html[data-theme="dark"] .post-wrapper,
  html[data-theme="dark"] .post-footer {
    background-color: #18181b;
  }
  html[data-theme="dark"] .post-author-image {
    border-color: #18181b;
  }
  html[data-theme="dark"] .post-feed .featured .post-wrapper,
  html[data-theme="dark"] .post-feed .featured .post-footer {
    background-color: transparent;
  }
  html[data-theme="dark"] .gh-btn {
    background-color: #fafafa;
    color: #09090b;
  }
  html[data-theme="dark"] .gh-dropdown {
    background-color: #18181b;
    box-shadow:
      0 0 0 1px #3f3f46,
      0 7px 20px -5px rgba(0, 0, 0, 0.6);
  }
  html[data-theme="dark"] .gh-dropdown li a {
    color: #fafafa !important;
  }
  /* Plain Markdown tables and .ww-table only: a classed/id'd table is a light
     island (below) and keeps the theme's light cells. */
  html[data-theme="dark"]
    .gh-content
    > table:not(.gist table):not(
      :is([class], [id]):not([class*="kg-"]):not(.ww-table):not([data-ww-dark])
    )
    th {
    background-color: #18181b;
  }
  html[data-theme="dark"]
    .gh-content
    > table:not(.gist table):not(
      :is([class], [id]):not([class*="kg-"]):not(.ww-table):not([data-ww-dark])
    )
    td:first-child {
    background-image: linear-gradient(90deg, #09090b 50%, rgba(9, 9, 11, 0));
  }
  html[data-theme="dark"]
    .gh-content
    > table:not(.gist table):not(
      :is([class], [id]):not([class*="kg-"]):not(.ww-table):not([data-ww-dark])
    )
    td:last-child {
    background-image: linear-gradient(270deg, #09090b 50%, rgba(9, 9, 11, 0));
  }
  html[data-theme="dark"] .gh-cta-gradient {
    background: linear-gradient(180deg, rgba(9, 9, 11, 0), #09090b);
  }

  /* ---- Post content written in light mode (ww-dark-content) ----
     Most posts were authored against a white page. Ghost's own cards and
     plain text follow the palette above. Everything else is handled here:
       1. Hand-written HTML blocks (a classed or id'd div, article, list,
          table... placed straight into the post) bring their own light
          colours, often in several layers. They can't be remapped reliably,
          so they render as a light "island": white panel with the light
          theme tokens restored, as in light mode. Colour and background sit
          in :where() (zero specificity) so the block's own CSS still wins. A
          block styled for both modes can opt out with data-ww-dark on its
          root element.
       2. Top-level .ww-table tables (styled site-wide in Code injection) are
          remapped to dark; one inside an island stays light with it.
       3. Stray inline text colours outside an island fall back to the theme.
       4. Accent buttons/callouts get dark text (white on amber is 2.1:1).
       5. Transparent images get a light backing so dark artwork stays visible. */
  html[data-theme="dark"]
    .gh-content
    > :is(div, article, section, aside, ol, ul, table, figure, form, details, nav):is(
      [class],
      [id]
    ):not([class*="kg-"]):not(.ww-table):not([data-ww-dark]),
  html[data-theme="dark"]
    .gh-content
    :is(.kg-header-card.kg-style-light, .kg-product-card-container) {
    color-scheme: light;
    --color-primary-text: #333;
    --primary-text-color: #333;
    --color-secondary-text: #6b6b6b;
    --secondary-text-color: #6b6b6b;
    --color-darker-gray: #15171a;
    --darker-gray-color: #15171a;
    --color-lighter-gray: #f6f6f6;
    --color-light-gray: #e6e6e6;
    --light-gray-color: #e6e6e6;
    --color-mid-gray: #ccc;
    --background-color: #fff;
    /* Ghost's amber accent is 2.1:1 on white; a darker amber reads at 5:1. */
    --ghost-accent-color: #b45309;
  }
  :where(
    html[data-theme="dark"]
      .gh-content
      > :is(div, article, section, aside, ol, ul, table, figure, form, details, nav):is(
        [class],
        [id]
      ):not([class*="kg-"]):not(.ww-table):not([data-ww-dark])
  ) {
    background-color: #fff;
    color: #333;
    border-radius: 8px;
    /* Breathing room without narrowing the block: side shadows paint outside
       the box, so its own tables and grids lay out exactly as in light mode. */
    padding-block: 1.2rem;
    box-shadow:
      -1.2rem 0 0 #fff,
      1.2rem 0 0 #fff;
  }
  /* An element given an inline background colour by the editor (a white or
     tinted paragraph, span, cell...) is a light pair too: restore the light
     tokens and inherited text colour exactly as in light mode, with no panel
     and no change to geometry. Zero specificity, so its own colours still win.
     Image-only and cleared backgrounds stay dark. Only the outermost pair is
     reset: inside an island root or another inline-background pair the
     context is already light, and a reset there would override the
     foreground the author's pair passes down (white text on a nested dark
     background). */
  :where(
    html[data-theme="dark"]
      .gh-content
      :is(
        [style*="background-color:" i],
        [style*="background-color :" i],
        [style*="background:" i],
        [style*="background :" i]
      ):not([style*="url(" i]):not(
        [style*="background:none" i],
        [style*="background: none" i],
        [style*="transparent" i],
        [style*="background: inherit" i],
        [style*="background:inherit" i],
        [style*="background-color: inherit" i],
        [style*="background-color:inherit" i]
      ):not([data-ww-dark], [data-ww-dark] *):not(
        .gh-content
          > :is(div, article, section, aside, ol, ul, table, figure, form, details, nav):is(
            [class],
            [id]
          ):not([class*="kg-"]):not(.ww-table):not([data-ww-dark])
          *,
        :is(
            [style*="background-color:" i],
            [style*="background-color :" i],
            [style*="background:" i],
            [style*="background :" i]
          ):not([style*="url(" i]):not(
            [style*="background:none" i],
            [style*="background: none" i],
            [style*="transparent" i],
            [style*="background: inherit" i],
            [style*="background:inherit" i],
            [style*="background-color: inherit" i],
            [style*="background-color:inherit" i]
          )
          *
      )
  ) {
    color-scheme: light;
    --color-primary-text: #333;
    --primary-text-color: #333;
    --color-secondary-text: #6b6b6b;
    --secondary-text-color: #6b6b6b;
    --color-darker-gray: #15171a;
    --darker-gray-color: #15171a;
    --color-lighter-gray: #f6f6f6;
    --color-light-gray: #e6e6e6;
    --light-gray-color: #e6e6e6;
    --color-mid-gray: #ccc;
    --background-color: #fff;
    color: #333;
  }
  /* Ghost's `.gh-content table` background shorthand (0,2,2) clears the white
     above, so the dark page would show through an island table's cells. Same
     specificity, later in the cascade: wins over Ghost, loses to any table
     background the post sets more specifically. */
  :where(html[data-theme="dark"])
    .gh-content
    > table:not(.gist table):where(
      :is([class], [id]):not([class*="kg-"]):not(.ww-table):not([data-ww-dark])
    ) {
    background-color: #fff;
  }
  /* Not on an island root or inside one, and not inside an element with its
     own inline background: those keep their light foreground/background pair. */
  html[data-theme="dark"]
    .gh-content
    [style*="color"]:not([style*="background"]):not(
      .gh-content
        > :is(div, article, section, aside, ol, ul, table, figure, form, details, nav):is(
          [class],
          [id]
        ):not([class*="kg-"]):not(.ww-table):not([data-ww-dark]),
      .gh-content
        > :is(div, article, section, aside, ol, ul, table, figure, form, details, nav):is(
          [class],
          [id]
        ):not([class*="kg-"]):not(.ww-table):not([data-ww-dark])
        *,
      .gh-content [style*="background"] *
    ) {
    color: inherit !important;
  }

  html[data-theme="dark"] .gh-content > table.ww-table {
    background: #18181b !important;
    color: #d4d4d8 !important;
    border-left-color: #3f3f46 !important;
    border-top-color: #3f3f46 !important;
  }
  html[data-theme="dark"] .gh-content > table.ww-table .ww-thead {
    background-color: #27272a !important;
  }
  html[data-theme="dark"] .gh-content > table.ww-table :is(th, td) {
    border-right-color: #3f3f46 !important;
    border-bottom-color: #3f3f46 !important;
    color: inherit !important;
  }
  html[data-theme="dark"] .gh-content > table.ww-table th {
    color: #fafafa !important;
  }

  html[data-theme="dark"]
    .gh-content
    :is(.kg-btn-accent, .kg-product-card-btn-accent, .kg-callout-card-accent),
  html[data-theme="dark"] .gh-content .kg-callout-card-accent a,
  html[data-theme="dark"] .gh-content .kg-header-card.kg-style-accent :is(h2, h3, a) {
    color: #09090b;
  }
  html[data-theme="dark"] .gh-content .kg-header-card.kg-style-light :is(h2, h3) {
    color: #15171a;
  }
  html[data-theme="dark"] .gh-content > blockquote {
    color: #e4e4e7;
  }
  html[data-theme="dark"] .gh-content :is(.kg-image-card, .kg-gallery-image) img {
    background-color: #fafafa;
  }

  /* ---- Theme switch (Light / Dark / System) in the header actions ---- */
  html.ww-theme-instant,
  html.ww-theme-instant * {
    transition: none !important;
  }
  .ww-theme-switch {
    display: inline-flex;
    gap: 2px;
    margin-left: auto;
    padding: 2px;
    border: 1px solid var(--color-light-gray, #e6e6e6);
    border-radius: 999px;
  }
  .ww-theme-switch button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-darker-gray, #15171a);
    cursor: pointer;
  }
  .ww-theme-switch button:hover {
    background-color: var(--color-lighter-gray, #f6f6f6);
  }
  .ww-theme-switch button[aria-pressed="true"] {
    background-color: #f59e0b;
    color: #09090b;
  }
  .ww-theme-switch button:focus-visible {
    outline: 2px solid #f59e0b;
    outline-offset: 2px;
  }
  /* Mobile: the actions bar only shows inside the open burger menu, centred. */
  @media (max-width: 767px) {
    .ww-theme-switch {
      margin-left: 0;
    }
    .ww-theme-switch button {
      width: 44px;
      height: 44px;
    }
  }