/*
Theme Name:  Tim Dixon
Theme URI:   https://timdixon.net
Author:      Tim Dixon
Author URI:  https://timdixon.net
Description: A clean, fully WCAG 2.2 AAA-compliant WordPress theme built to Tim Dixon's design and accessibility guidelines. Navy/Orange/Sky-Blue brand palette, full light/dark mode, keyboard navigation, and screen-reader-first markup throughout.
Version:     1.2.9
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License:     MIT
License URI: https://opensource.org/licenses/MIT
Text Domain: timdixon
Tags:        accessibility-ready, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, dark-mode, blog, portfolio
*/

/* ══════════════════════════════════════════════════════════════════
   DESIGN TOKENS  — Tim Dixon Brand System
   All AAA-verified contrast ratios documented inline.
   Never hardcode colours outside of :root and the header block.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand constants ── */
  --navy:   #061528;
  --orange: #FF7C00;
  --blue:   #63D2FF;

  /* ── Light mode (default) ── */
  --bg:            #f4f6f8;
  --bg-card:       #ffffff;
  --fg:            #1a1a1a;   /* 17.8:1 AAA on white   */
  --fg-muted:      #4b5563;   /*  7.6:1 AAA on white   */
  --border:        #d1d5db;
  --accent:        #061528;   /* Navy — primary interactive */
  --accent-hover:  #0a2445;
  --accent-text:   #ffffff;
  --accent-subtle: rgba(6, 21, 40, 0.08);
  --pass:          #14532d;   /*  9.1:1 AAA */
  --pass-bg:       #dcfce7;
  --fail:          #7f1d1d;   /* 10.0:1 AAA */
  --fail-bg:       #fee2e2;
  --neutral:       #4b5563;
  --neutral-bg:    #f0f2f5;
  --code-bg:       #f0f2f5;
  --shadow:        0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05);
  --radius:        10px;
  --max-w:         1100px;
}

/* ── Dark mode — OS preference ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #061528;
    --bg-card:       #0d2040;
    --fg:            #ffffff;   /* 18.3:1 AAA */
    --fg-muted:      #63D2FF;   /* 10.6:1 AAA */
    --border:        #1a3050;
    --accent:        #FF7C00;   /*  7.1:1 AAA */
    --accent-hover:  #ff8f1a;
    --accent-text:   #061528;
    --accent-subtle: rgba(255,124,0,.14);
    --code-bg:       #1a3050;
    --neutral-bg:    #1a3050;
    --pass:          #4ade80;   /*  8.8:1 AAA */
    --pass-bg:       rgba(21,128,61,.22);
    --fail:          #fca5a5;   /*  8.1:1 AAA */
    --fail-bg:       rgba(185,28,28,.22);
    --neutral:       #63D2FF;
  }
}

/* ── Dark mode — manual toggle ── */
:root[data-theme="dark"] {
  --bg:            #061528;
  --bg-card:       #0d2040;
  --fg:            #ffffff;
  --fg-muted:      #63D2FF;
  --border:        #1a3050;
  --accent:        #FF7C00;
  --accent-hover:  #ff8f1a;
  --accent-text:   #061528;
  --accent-subtle: rgba(255,124,0,.14);
  --code-bg:       #1a3050;
  --neutral-bg:    #1a3050;
  --pass:          #4ade80;
  --pass-bg:       rgba(21,128,61,.22);
  --fail:          #fca5a5;
  --fail-bg:       rgba(185,28,28,.22);
  --neutral:       #63D2FF;
}

/* ══════════════════════════════════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light dark;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, canvas, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ══════════════════════════════════════════════════════════════════
   MOTION — respect prefers-reduced-motion
   ══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   SKIP LINK — must be the first focusable element
   ══════════════════════════════════════════════════════════════════ */

.skip-link {
  position: absolute;
  top: -50px;
  left: 16px;
  background: var(--accent);
  color: var(--accent-text);
  padding: 10px 16px;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  font-size: 0.9rem;
  z-index: 9999;
  text-decoration: none;
  transition: top 120ms ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.skip-link:focus { top: 0; }

/* ══════════════════════════════════════════════════════════════════
   FOCUS — WCAG 2.4.11 / 2.4.13
   ══════════════════════════════════════════════════════════════════ */

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   HEADER — always navy, never inherits theme tokens
   ══════════════════════════════════════════════════════════════════ */

.site-header {
  background: #061528;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.site-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FF7C00, #ff8f1a 60%, transparent);
  pointer-events: none;
}

.site-header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1.25rem 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
}

.site-branding { flex: 1; min-width: 0; }

.site-title {
  margin: 0 0 2px;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.site-title a {
  color: #ffffff !important;   /* 18.33:1 AAA on navy */
  text-decoration: none;
  min-height: unset;
  min-width: unset;
}
.site-title a:hover { text-decoration: underline; }

.site-title .header-accent { color: #FF7C00; } /* 7.10:1 AAA on navy */

.site-description {
  color: #63D2FF;  /* 10.64:1 AAA on navy */
  margin: 0;
  font-size: 0.875rem;
}

/* Custom logo */
.custom-logo-link { display: inline-flex; align-items: center; }
.custom-logo { max-height: 60px; width: auto; }

/* Header controls — nav toggle + theme toggle */
.header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════
   THEME TOGGLE
   ══════════════════════════════════════════════════════════════════ */

.theme-toggle {
  appearance: none;
  background: transparent;
  border: 2px solid rgba(255,255,255,.35);
  color: #ffffff;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  flex-shrink: 0;
  min-height: 44px;
  min-width: 44px;
  transition: border-color 120ms, background 120ms;
}
.theme-toggle:hover {
  border-color: #63D2FF;
  background: rgba(99,210,255,.12);
}
.theme-toggle:focus-visible {
  outline: 3px solid #63D2FF;
  outline-offset: 3px;
}
.theme-toggle:active { transform: translateY(1px); }

.icon-sun  { display: none; }
.icon-moon { display: none; }
[data-theme="dark"]  .icon-sun  { display: block; }
[data-theme="light"] .icon-moon { display: block; }

.theme-toggle-label { pointer-events: none; }

/* ══════════════════════════════════════════════════════════════════
   NAVIGATION
   ══════════════════════════════════════════════════════════════════ */

.main-navigation {
  background: #061528;
  border-top: 1px solid rgba(255,255,255,.08);
}

.main-navigation .nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 20px;
}

.main-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.main-navigation li { position: relative; }

.main-navigation a {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,.85) !important;
  text-decoration: none;
  padding: 12px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  min-height: 44px;
  transition: color 120ms, background 120ms;
  border-bottom: 3px solid transparent;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-parent > a {
  color: #FF7C00 !important;
  border-bottom-color: #FF7C00;
  background: rgba(255,124,0,.06);
}

/* Dropdown */
.main-navigation ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  background: #0d2040;
  border: 1px solid #1a3050;
  border-radius: 0 0 var(--radius) var(--radius);
  min-width: 200px;
  flex-direction: column;
  display: none;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.main-navigation ul ul a {
  border-bottom: none;
  padding: 10px 16px;
}
.main-navigation li:hover > ul,
.main-navigation li:focus-within > ul { display: flex; }

/* Mobile nav toggle */
.nav-toggle {
  appearance: none;
  background: transparent;
  border: 2px solid rgba(255,255,255,.35);
  color: #ffffff;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  min-height: 44px;
  min-width: 44px;
  display: none;
  align-items: center;
  gap: 8px;
  transition: border-color 120ms, background 120ms;
}
.nav-toggle:hover {
  border-color: #63D2FF;
  background: rgba(99,210,255,.12);
}
.nav-toggle:focus-visible {
  outline: 3px solid #63D2FF;
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .main-navigation ul {
    flex-direction: column;
    display: none;
  }
  .main-navigation.nav-open ul { display: flex; }
  .main-navigation ul ul {
    position: static;
    border: none;
    border-left: 3px solid #FF7C00;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════════════ */

.site-main {
  flex: 1;
}

.page-content {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 32px 20px;
}

/* Two-column: content + sidebar */
.content-sidebar-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 32px 20px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: start;
}

@media (max-width: 768px) {
  .content-sidebar-wrap {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  color: var(--fg);
  line-height: 1.25;
  margin-top: 0;
}

h1 { font-size: 1.9rem; font-weight: 800; margin-bottom: .75rem; }
h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: .65rem; }
h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: .5rem;  }
h4 { font-size: 1rem;   font-weight: 600; margin-bottom: .5rem;  }

p { margin: 0 0 1.2em; line-height: 1.65; }

/* ══════════════════════════════════════════════════════════════════
   LINKS
   ══════════════════════════════════════════════════════════════════ */

a {
  color: var(--accent);
  transition: color 120ms;
}
a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════ */

.button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--fg);
  padding: 10px 18px;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: background 120ms, border-color 120ms, transform 120ms;
}
.button:hover,
button:hover,
input[type="submit"]:hover { border-color: var(--accent); }
.button:active,
button:active { transform: translateY(1px); }
.button:disabled,
button:disabled { opacity: 0.6; cursor: not-allowed; }

.button-primary,
input[type="submit"] {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}
.button-primary:hover,
input[type="submit"]:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-text);
}

.button-ghost { background: transparent; }

/* ══════════════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════════════ */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}
.card-pass    { border-left: 4px solid var(--pass); }
.card-fail    { border-left: 4px solid var(--fail); }
.card-neutral { border-left: 4px solid var(--neutral); }

/* ══════════════════════════════════════════════════════════════════
   BADGES / PILLS
   ══════════════════════════════════════════════════════════════════ */

.badge {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--neutral-bg);
  color: var(--fg-muted);
  display: inline-block;
  line-height: 1.5;
}
.badge-pass   { background: var(--pass-bg);       color: var(--pass);   }
.badge-fail   { background: var(--fail-bg);        color: var(--fail);   }
.badge-active { background: var(--accent-subtle);  color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════
   NOTICE BLOCKS
   ══════════════════════════════════════════════════════════════════ */

.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--orange);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--fg-muted);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}
.notice svg { flex-shrink: 0; margin-top: 2px; }

/* ══════════════════════════════════════════════════════════════════
   POSTS — ARCHIVE / BLOG
   ══════════════════════════════════════════════════════════════════ */

.post-list { display: flex; flex-direction: column; gap: 24px; }

.post-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  box-shadow: var(--shadow);
  transition: border-color 120ms, box-shadow 120ms;
}
.post-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
}

.post-card .post-meta {
  font-size: 0.82rem;
  color: var(--fg-muted);
  margin-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.post-card .post-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.3;
}
.post-card .post-title a {
  color: var(--fg);
  text-decoration: none;
}
.post-card .post-title a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.post-card .post-excerpt {
  color: var(--fg-muted);
  font-size: 0.92rem;
  margin: 0 0 16px;
  line-height: 1.65;
}

.post-card .post-thumbnail {
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
}
.post-card .post-thumbnail img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

/* Category labels */
.cat-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent);
  background: var(--accent-subtle);
  padding: 2px 8px;
  border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   SINGLE POST
   ══════════════════════════════════════════════════════════════════ */

.single-post-header { margin-bottom: 32px; }

.single-post-header .post-meta {
  font-size: 0.85rem;
  color: var(--fg-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.single-post-header h1 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 16px;
}

.featured-image-wrap {
  margin-bottom: 32px;
  border-radius: var(--radius);
  overflow: hidden;
}
.featured-image-wrap img { width: 100%; height: auto; }

.entry-content {
  line-height: 1.75;
  font-size: 1rem;
}
.entry-content h2 { font-size: 1.5rem; margin: 2rem 0 .75rem; }
.entry-content h3 { font-size: 1.2rem; margin: 1.75rem 0 .65rem; }
.entry-content p   { margin-bottom: 1.4em; }
.entry-content ul,
.entry-content ol  { margin: 0 0 1.4em; padding-left: 1.5em; }
.entry-content li  { margin-bottom: .4em; }
.entry-content blockquote {
  margin: 1.5rem 0;
  padding: 16px 20px;
  border-left: 4px solid var(--accent);
  background: var(--neutral-bg);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--fg-muted);
}
.entry-content code {
  background: var(--code-bg);
  color: var(--fg);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85em;
  font-family: "SF Mono", "Fira Code", Consolas, monospace;
}
.entry-content pre {
  background: var(--code-bg);
  padding: 16px 20px;
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--border);
}
.entry-content pre code {
  background: none;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1.6;
}

/* Post navigation */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.post-nav-prev,
.post-nav-next {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  text-decoration: none;
  color: var(--fg);
  transition: border-color 120ms;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.post-nav-next { text-align: right; margin-left: auto; }
.post-nav-prev:hover,
.post-nav-next:hover { border-color: var(--accent); }
.post-nav-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-muted);
}
.post-nav-title { font-weight: 600; font-size: 0.9rem; color: var(--accent); }

@media (max-width: 640px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-next { text-align: left; margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR / WIDGETS
   ══════════════════════════════════════════════════════════════════ */

.sidebar { display: flex; flex-direction: column; gap: 24px; }

.widget {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.widget-title {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--fg-muted);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}

.widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.widget ul li {
  border-bottom: 1px solid var(--border);
  padding: 7px 0;
  font-size: 0.9rem;
}
.widget ul li:last-child { border-bottom: none; padding-bottom: 0; }
.widget ul li a { color: var(--fg); font-weight: 500; }
.widget ul li a:hover { color: var(--accent); }

/* Search widget */
.search-form {
  display: flex;
  gap: 8px;
}
.search-form input[type="search"] {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--fg);
  font: inherit;
  font-size: 0.9rem;
  min-height: 44px;
}
.search-form input[type="search"]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}
.search-form button { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════
   COMMENTS
   ══════════════════════════════════════════════════════════════════ */

.comments-area {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.comments-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 24px;
}

.comment-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}

.comment {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.comment .comment-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.comment .comment-author img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.comment .comment-author .fn {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--fg);
  font-style: normal;
}

.comment .comment-metadata {
  font-size: 0.8rem;
  color: var(--fg-muted);
}

.comment-body p { margin-bottom: .8em; font-size: 0.92rem; }

.reply a {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
}

/* Comment form */
.comment-form label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 4px;
  color: var(--fg);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--fg);
  font: inherit;
  font-size: 0.9rem;
  min-height: 44px;
  margin-bottom: 16px;
  transition: border-color 120ms;
}
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form input:focus-visible,
.comment-form textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════════════════════════ */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  vertical-align: middle;
}
th {
  background: var(--neutral-bg);
  font-weight: 700;
}
tr:last-child td { border-bottom: none; }

@media (max-width: 768px) {
  table { font-size: 0.82rem; }
}

/* ══════════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════════ */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.pagination a,
.pagination .current,
.pagination span {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  padding: 0 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--fg);
  transition: border-color 120ms, background 120ms;
}
.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination .current {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════════
   HERO — FRONT PAGE
   ══════════════════════════════════════════════════════════════════ */

.hero {
  background: #061528;
  color: #ffffff;
  padding: 64px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(255,124,0,.1) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 20% 70%, rgba(99,210,255,.07) 0%, transparent 65%);
  pointer-events: none;
}

.hero-inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
}

.hero h1 {
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.hero h1 span { color: #FF7C00; }

.hero p {
  color: #63D2FF;
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-cta-primary {
  background: #FF7C00;
  color: #061528 !important;
  border-color: #FF7C00;
  font-weight: 700;
}
.hero-cta-primary:hover {
  background: #ff8f1a;
  border-color: #ff8f1a;
  text-decoration: none;
}

.hero-cta-ghost {
  background: transparent;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.4);
}
.hero-cta-ghost:hover {
  border-color: #63D2FF;
  background: rgba(99,210,255,.12);
  text-decoration: none;
}

@media (max-width: 640px) {
  .hero h1 { font-size: 1.75rem; }
  .hero p  { font-size: 1rem; }
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════ */

.site-footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 32px 20px;
  text-align: center;
}

.site-footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.footer-nav ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}
.footer-nav a {
  color: var(--fg-muted);
  text-decoration: none;
  padding: 6px 12px;
  font-size: 0.875rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.footer-nav a:hover { color: var(--accent); text-decoration: underline; }

.footer-credits {
  font-size: 0.8rem;
  color: var(--fg-muted);   /* 7.6:1 AAA light, 8.7:1 AAA dark */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}
.footer-credits a {
  color: inherit;
  text-decoration: underline;
}
.footer-sep {
  opacity: 0.5;
  user-select: none;
  aria-hidden: true;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  body { font-size: 14px; }
  .site-header h1 { font-size: 1.1rem; }
  .single-post-header h1 { font-size: 1.5rem; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }
  .page-content { padding: 20px 16px; }
}

/* ══════════════════════════════════════════════════════════════════
   WORDPRESS ALIGNMENT & BLOCK HELPERS
   ══════════════════════════════════════════════════════════════════ */

.aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; }
.alignleft   { float: left;  margin: 0 1.5rem 1rem 0; }
.alignright  { float: right; margin: 0 0 1rem 1.5rem; }
.alignfull   { width: 100vw; margin-left: calc(50% - 50vw); }
.alignwide   { width: calc(100% + 40px); margin-left: -20px; }

.wp-caption { max-width: 100%; background: var(--neutral-bg); border: 1px solid var(--border); padding: 4px; border-radius: 6px; }
.wp-caption-text { font-size: 0.8rem; color: var(--fg-muted); text-align: center; padding: 6px 4px 4px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.gallery-item img { width: 100%; height: 180px; object-fit: cover; border-radius: 6px; }

/* Screen reader only utility */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ══════════════════════════════════════════════════════════════════
   STATUS — 404 / SEARCH NO RESULTS
   ══════════════════════════════════════════════════════════════════ */

.status-block {
  text-align: center;
  padding: 64px 20px;
}
.status-block .status-code {
  font-size: 6rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 16px;
}
.status-block h1 { font-size: 1.5rem; margin-bottom: 12px; }
.status-block p  { color: var(--fg-muted); max-width: 440px; margin: 0 auto 24px; }

/* ══════════════════════════════════════════════════════════════════
   SOCIAL ICONS
   Covers WordPress core Social Links block, Jetpack, and common
   plugin-generated markup. All targets meet 44×44 px WCAG 2.5.8.
   ══════════════════════════════════════════════════════════════════ */

/* ── Generic social icon list (most themes / plugins) ── */
.social-icons,
.social-links,
.widget_social_widget ul,
.wp-block-social-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Individual icon wrapper */
.social-icons li,
.social-links li,
.widget_social_widget ul li,
.wp-block-social-links .wp-block-social-link {
  margin: 0;
  padding: 0;
}

/* The clickable icon — square pill, high-contrast on both themes */
.social-icons a,
.social-links a,
.widget_social_widget ul li a,
.wp-block-social-links .wp-block-social-link a,
a.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--accent);         /* Navy in light, Orange in dark — both AAA */
  color: var(--accent-text) !important;
  border: 2px solid transparent;
  text-decoration: none;
  font-size: 1.1rem;
  transition: background 140ms, border-color 140ms, transform 140ms;
}

.social-icons a:hover,
.social-links a:hover,
.widget_social_widget ul li a:hover,
.wp-block-social-links .wp-block-social-link a:hover,
a.social-icon:hover {
  background: var(--accent-hover);
  border-color: var(--accent);
  text-decoration: none;
  transform: translateY(-2px);
}

.social-icons a:focus-visible,
.social-links a:focus-visible,
.wp-block-social-links .wp-block-social-link a:focus-visible,
a.social-icon:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* SVG icons inside social links — fill to icon colour */
.social-icons a svg,
.social-links a svg,
.wp-block-social-links .wp-block-social-link a svg,
a.social-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
  pointer-events: none;
}

/* WordPress core Social Links block overrides */
.wp-block-social-links.is-style-logos-only .wp-block-social-link a,
.wp-block-social-links.is-style-pill-shape .wp-block-social-link a {
  background: var(--accent);
  color: var(--accent-text) !important;
  padding: 10px 12px;
  width: auto;
  min-width: 44px;
  border-radius: 10px;
}

/* Override WP's per-network background colours — use brand palette */
.wp-block-social-link-anchor,
.wp-block-social-links:not(.is-style-logos-only) .wp-block-social-link {
  background-color: var(--accent) !important;
  color: var(--accent-text) !important;
}

/* ── Sidebar social widget ── */
.widget .social-icons,
.widget .social-links {
  gap: 8px;
  margin-top: 8px;
}

/* ── Footer social icons (appear on dark bg) ── */
.site-footer .social-icons a,
.site-footer .social-links a,
.site-footer a.social-icon {
  background: rgba(255,255,255,.12);
  color: #ffffff !important;
  border-color: rgba(255,255,255,.25);
}
.site-footer .social-icons a:hover,
.site-footer .social-links a:hover,
.site-footer a.social-icon:hover {
  background: var(--orange);
  color: var(--navy) !important;
  border-color: var(--orange);
}

/* ══════════════════════════════════════════════════════════════════
   CONTACT PAGE — form, buttons, and link visibility
   Targets both classic contact form markup and CF7 / WPForms.
   ══════════════════════════════════════════════════════════════════ */

/* ── Contact form wrapper ── */
.page-template-contact .entry-content,
.contact-form-wrap {
  max-width: 640px;
}

/* ── Field labels ── */
.wpcf7 label,
.wpforms-field-label,
.contact-form label,
form.contact label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--fg);
  margin-bottom: 5px;
}

/* Required asterisk — visible, not colour-only */
.wpcf7 .wpcf7-not-valid-tip,
abbr[title="required"],
.required-mark {
  color: var(--fail);
  font-weight: 700;
}

/* ── Text inputs / textareas ── */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea,
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select,
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  background: var(--bg);
  border: 2px solid var(--border);   /* 2 px for better visibility */
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--fg);
  font: inherit;
  font-size: 0.95rem;
  min-height: 48px;
  margin-bottom: 18px;
  transition: border-color 140ms, box-shadow 140ms;
  box-sizing: border-box;
}

.wpcf7 textarea,
.wpforms-field textarea,
.contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

/* Focus — clear 3 px ring + accent border */
.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible,
.wpforms-field input:focus-visible,
.wpforms-field textarea:focus-visible,
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-subtle);
}

/* ── Submit / CTA buttons on contact page ── */
.wpcf7 input[type="submit"],
.wpforms-submit,
.contact-form input[type="submit"],
.contact-form button[type="submit"],
.entry-content .wp-block-button__link,
.entry-content a.button,
.entry-content .button {
  /* Reset to ensure brand styles apply */
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;         /* Generous padding — easier to hit */
  min-height: 52px;           /* Larger than WCAG minimum for prominence */
  min-width: 160px;
  border-radius: 8px;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 140ms, border-color 140ms, transform 140ms, box-shadow 140ms;

  /* High-contrast brand colours */
  background: var(--accent);     /* Navy (light) / Orange (dark) */
  color: var(--accent-text);     /* White (light) / Navy (dark) — both AAA */
  border: 2px solid var(--accent);
}

.wpcf7 input[type="submit"]:hover,
.wpforms-submit:hover,
.contact-form input[type="submit"]:hover,
.contact-form button[type="submit"]:hover,
.entry-content .wp-block-button__link:hover,
.entry-content a.button:hover,
.entry-content .button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-text);
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  transform: translateY(-1px);
}

.wpcf7 input[type="submit"]:active,
.wpforms-submit:active,
.contact-form input[type="submit"]:active,
.entry-content .wp-block-button__link:active {
  transform: translateY(1px);
  box-shadow: none;
}

.wpcf7 input[type="submit"]:focus-visible,
.wpforms-submit:focus-visible,
.contact-form input[type="submit"]:focus-visible,
.entry-content .wp-block-button__link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--accent-subtle);
}

/* ── Ghost / outline button variant on content pages ── */
.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--accent) !important;
  border: 2px solid var(--accent);
}
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--accent);
  color: var(--accent-text) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

/* ── CF7 validation messages ── */
.wpcf7-not-valid-tip {
  display: block;
  margin-top: -12px;
  margin-bottom: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fail);
}
.wpcf7-response-output {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 16px;
  border-left: 4px solid var(--pass);
  background: var(--pass-bg);
  color: var(--pass);
}
.wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-response-output.wpcf7-mail-sent-ng {
  border-left-color: var(--fail);
  background: var(--fail-bg);
  color: var(--fail);
}

/* ── Inline links on contact / page content — ensure visibility ── */
.entry-content a:not(.button):not(.wp-block-button__link) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}
.entry-content a:not(.button):not(.wp-block-button__link):hover {
  color: var(--accent-hover);
}

/* Dark mode — orange links on dark backgrounds keep AAA contrast.
   --accent is already set to #FF7C00 (7.1:1 AAA) in dark mode,
   so no separate rule is needed; the token switch handles it. */

/* ══════════════════════════════════════════════════════════════════
   SIMPLE LINK DIRECTORY (SLD) PLUGIN — qcopd / sld classes
   Targets all known class names from the live plugin markup.
   All colours use design tokens; dark mode handled via :root tokens.
   ══════════════════════════════════════════════════════════════════ */

/* ── Search bar ── */
.sld-top-area {
  padding: 16px 0 14px;
  margin-bottom: 0;
}
.sld-border-bottom {
  border-bottom: 2px solid var(--border);
  margin-bottom: 16px;
}
input.sld-search,
input.sld_search_filter,
.text-input.sld-search {
  width: 100%;
  max-width: 380px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--fg);
  font: inherit;
  font-size: 0.9rem;
  min-height: 44px;
  transition: border-color 140ms, box-shadow 140ms;
}
input.sld-search:focus,
input.sld_search_filter:focus {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-subtle);
}
input.sld-search::placeholder,
input.sld_search_filter::placeholder {
  color: var(--fg-muted);
  opacity: 1;
}

/* ── Tag filter pills ── */
.sld-tag-filter-area {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  font-size: 0.85rem;
  color: var(--fg-muted);
  font-weight: 600;
  margin-bottom: 8px;
}
a.sld_tag_filter {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--neutral-bg);
  color: var(--fg) !important;
  border: 2px solid var(--border);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 120ms, border-color 120ms, color 120ms;
  cursor: pointer;
}
a.sld_tag_filter:hover {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent) !important;
  text-decoration: none;
}
a.sld_tag_filter.active,
a.sld_tag_filter[data-tag=""].active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text) !important;
}

/* ── Mobile tag dropdown ── */
.sld_tag_filter_dropdown_mobile { margin-bottom: 12px; }
select.sld_tag_filter_select,
.sld-filter-area-select-mobile select {
  width: 100%;
  max-width: 340px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--fg);
  font: inherit;
  font-size: 0.9rem;
  min-height: 44px;
  appearance: none;
  cursor: pointer;
}
select.sld_tag_filter_select:focus,
.sld-filter-area-select-mobile select:focus {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

/* ── Category filter buttons
   The plugin injects background:#000000;color:#ffffff !important inline.
   We use !important here specifically to override those inline styles
   while keeping brand colours. ── */
.filter-area {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 24px;
}
a.filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 6px 16px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms, transform 120ms;
  /* Override plugin inline black background */
  background: var(--neutral-bg) !important;
  color: var(--fg) !important;
  border: 2px solid var(--border);
}
a.filter-btn:hover {
  background: var(--accent-subtle) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  text-decoration: none;
  transform: translateY(-1px);
}
a.filter-btn.filter-active,
a.filter-btn:focus-visible {
  background: var(--accent) !important;
  color: var(--accent-text) !important;
  border-color: var(--accent) !important;
}
a.filter-btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
a.filter-btn:active { transform: translateY(1px); }

/* ── List columns / grid ── */
.qcopd-list-wrapper { margin-top: 8px; }
.qc-grid { position: relative; }
.qc-grid-item,
.qcopd-list-column {
  padding: 0 8px 24px 0;
  box-sizing: border-box;
}

/* ── Individual category heading ── */
.qcopd-single-list h2,
.qcopd-single-list h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
  display: block;
}

/* ── Link list (ca-menu) ── */
ul.ca-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.ca-menu li {
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--border);
}
ul.ca-menu li:last-child { border-bottom: none; }

/* ── Individual link item layout ── */
.qcld-new-ca-content-outer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
}
.ca-icon,
.ca-icon.list-img-1 {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--neutral-bg);
}
.ca-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content area */
.ca-content {
  flex: 1;
  min-width: 0;
}
a.ca-main,
.ca-main {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent) !important;
  text-decoration: none;
  line-height: 1.35;
  margin-bottom: 2px;
  transition: color 120ms;
}
a.ca-main:hover,
.ca-main:hover {
  color: var(--accent-hover) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ca-sub {
  font-size: 0.8rem;
  color: var(--fg-muted);
  line-height: 1.4;
  margin-top: 2px;
}

/* Divider line between content and bookmark */
.qcld-sld-content-dividar {
  border: none;
  border-top: 1px solid var(--border);
  margin: 6px 0 4px;
}

/* Bookmark / save section */
.bookmark-section { display: none; } /* hidden unless user is logged in */

/* More text / description popup */
.sld_more_text {
  font-size: 0.8rem;
  color: var(--fg-muted);
  margin-top: 4px;
}

/* ── "New" badge ── */
.new-icon-section {
  margin-left: auto;
  flex-shrink: 0;
}
.new-icon-section span,
.sld-new-badge {
  display: inline-block;
  background: var(--orange);
  color: var(--navy);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ══════════════════════════════════════════════════════════════════
   JETPACK SHARE BUTTONS (.sharedaddy)
   Override Jetpack's generic grey buttons with brand colours.
   Must use !important on colour props to beat Jetpack's own sheet.
   ══════════════════════════════════════════════════════════════════ */

.sharedaddy { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); }
.sharedaddy .sd-title,
h3.sd-title {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--fg-muted) !important;
  margin: 0 0 10px !important;
}
.sd-content ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.sd-content ul li { margin: 0 !important; padding: 0 !important; }

/* The share button itself */
.sd-button,
a.sd-button,
.share-icon.sd-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 40px !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font: inherit !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 140ms, color 140ms, transform 120ms !important;
  /* Light mode: navy bg, white text — 18.3:1 AAA */
  background: var(--accent) !important;
  color: var(--accent-text) !important;
  border: 2px solid var(--accent) !important;
}
.sd-button:hover,
a.sd-button:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: var(--accent-text) !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}
.sd-button:focus-visible,
a.sd-button:focus-visible {
  outline: 3px solid var(--accent) !important;
  outline-offset: 3px !important;
}
/* Icon inside button */
.sd-button .share-icons,
.sd-button svg,
.sd-button .noticon {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
  color: inherit !important;
}

/* ── Dark mode overrides for share buttons ──
   In dark mode --accent = #FF7C00 (orange), --accent-text = #061528 (navy)
   Both AAA verified (7.1:1). No extra rules needed — tokens handle it.
   But Jetpack sometimes force-injects colours via JS, so we reinforce: */
[data-theme="dark"] .sd-button,
[data-theme="dark"] a.sd-button {
  background: var(--accent) !important;      /* orange */
  color: var(--accent-text) !important;      /* navy  */
  border-color: var(--accent) !important;
}
[data-theme="dark"] .sd-button:hover,
[data-theme="dark"] a.sd-button:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: var(--accent-text) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sd-button,
  :root:not([data-theme="light"]) a.sd-button {
    background: var(--accent) !important;
    color: var(--accent-text) !important;
    border-color: var(--accent) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   BUTTONS — dark mode explicit overrides
   The CSS token swap handles most cases automatically, but WPForms
   and CF7 sometimes inject inline colours. These rules reinforce
   the brand palette in both modes.
   ══════════════════════════════════════════════════════════════════ */

/* Light mode: navy bg, white text */
.button-primary,
input[type="submit"],
.wpcf7 input[type="submit"],
.wpforms-submit {
  background: var(--accent) !important;
  color: var(--accent-text) !important;
  border-color: var(--accent) !important;
}
.button-primary:hover,
input[type="submit"]:hover,
.wpcf7 input[type="submit"]:hover,
.wpforms-submit:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: var(--accent-text) !important;
}

/* Dark mode: orange bg, navy text — 7.1:1 AAA */
[data-theme="dark"] .button-primary,
[data-theme="dark"] input[type="submit"],
[data-theme="dark"] .wpcf7 input[type="submit"],
[data-theme="dark"] .wpforms-submit,
[data-theme="dark"] .hero-cta-primary {
  background: #FF7C00 !important;
  color: #061528 !important;
  border-color: #FF7C00 !important;
}
[data-theme="dark"] .button-primary:hover,
[data-theme="dark"] input[type="submit"]:hover,
[data-theme="dark"] .wpcf7 input[type="submit"]:hover {
  background: #ff8f1a !important;
  border-color: #ff8f1a !important;
  color: #061528 !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .button-primary,
  :root:not([data-theme="light"]) input[type="submit"],
  :root:not([data-theme="light"]) .wpcf7 input[type="submit"],
  :root:not([data-theme="light"]) .wpforms-submit {
    background: #FF7C00 !important;
    color: #061528 !important;
    border-color: #FF7C00 !important;
  }
}

/* Ghost button dark mode */
[data-theme="dark"] .hero-cta-ghost {
  border-color: rgba(255,255,255,.4) !important;
  color: #ffffff !important;
}
[data-theme="dark"] .hero-cta-ghost:hover {
  border-color: #63D2FF !important;
  background: rgba(99,210,255,.12) !important;
}

/* ══════════════════════════════════════════════════════════════════
   SOCIAL ICONS — light AND dark mode
   Covers: Jetpack Social Links, WP core Social Links block,
   Simple Social Icons widget, generic .social-icons lists.
   ══════════════════════════════════════════════════════════════════ */

.social-icons,
.social-links,
.widget_social_widget ul,
.wp-block-social-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.social-icons li,
.social-links li,
.wp-block-social-links .wp-block-social-link {
  margin: 0;
  padding: 0;
}

/* The icon link — light mode: navy bg 18.3:1 AAA */
.social-icons a,
.social-links a,
.widget_social_widget ul li a,
.wp-block-social-links .wp-block-social-link a,
a.social-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: var(--accent) !important;         /* navy light / orange dark */
  color: var(--accent-text) !important;         /* white light / navy dark  */
  border: 2px solid transparent !important;
  text-decoration: none !important;
  font-size: 1.1rem;
  transition: background 140ms, border-color 140ms, transform 140ms !important;
}
.social-icons a:hover,
.social-links a:hover,
.wp-block-social-links .wp-block-social-link a:hover,
a.social-icon:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent) !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}
.social-icons a:focus-visible,
.social-links a:focus-visible,
.wp-block-social-links .wp-block-social-link a:focus-visible,
a.social-icon:focus-visible {
  outline: 3px solid var(--accent) !important;
  outline-offset: 3px !important;
}
.social-icons a svg,
.social-links a svg,
.wp-block-social-links .wp-block-social-link a svg {
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
}

/* Override WP block per-network background colours */
.wp-block-social-link-anchor { background-color: var(--accent) !important; color: var(--accent-text) !important; }

/* Dark mode social icons: orange bg, navy text — 7.1:1 AAA */
[data-theme="dark"] .social-icons a,
[data-theme="dark"] .social-links a,
[data-theme="dark"] .wp-block-social-links .wp-block-social-link a,
[data-theme="dark"] a.social-icon {
  background: #FF7C00 !important;
  color: #061528 !important;
  border-color: transparent !important;
}
[data-theme="dark"] .social-icons a:hover,
[data-theme="dark"] .social-links a:hover,
[data-theme="dark"] a.social-icon:hover {
  background: #ff8f1a !important;
  border-color: #FF7C00 !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .social-icons a,
  :root:not([data-theme="light"]) .social-links a,
  :root:not([data-theme="light"]) .wp-block-social-links .wp-block-social-link a,
  :root:not([data-theme="light"]) a.social-icon {
    background: #FF7C00 !important;
    color: #061528 !important;
  }
}

/* ── Footer social — both themes need to be explicit ── */
.site-footer .social-icons a,
.site-footer .social-links a,
.site-footer a.social-icon {
  background: rgba(255,255,255,.15) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.3) !important;
}
.site-footer .social-icons a:hover,
.site-footer .social-links a:hover {
  background: #FF7C00 !important;
  color: #061528 !important;
  border-color: #FF7C00 !important;
}
[data-theme="dark"] .site-footer .social-icons a,
[data-theme="dark"] .site-footer .social-links a {
  background: rgba(255,255,255,.12) !important;
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER WIDGET COLUMNS
   ══════════════════════════════════════════════════════════════════ */

.footer-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}

/* ══════════════════════════════════════════════════════════════════
   SOCIAL ICONS — high-visibility, AAA-compliant
   Works with Contact Form 7, WPForms, and most social icon plugins.
   ══════════════════════════════════════════════════════════════════ */

/* Generic wrapper class used by most social icon plugins */
.social-links,
.social-icons,
.wp-social-link-wrapper,
[class*="social-nav"],
[class*="social-menu"] {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Individual icon items / links */
.social-links a,
.social-icons a,
.social-links li a,
.social-icons li a,
.wp-social-link a,
[class*="social-nav"] a,
[class*="social-menu"] a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;                /* Exceeds WCAG 2.5.8 44px minimum */
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	border-radius: 10px;
	background: var(--accent);  /* Navy in light, Orange in dark — both AAA */
	color: var(--accent-text) !important;
	text-decoration: none;
	font-size: 1.1rem;
	border: 2px solid transparent;
	transition: background 140ms, border-color 140ms, transform 120ms;
}

.social-links a:hover,
.social-icons a:hover,
.social-links li a:hover,
.social-icons li a:hover,
.wp-social-link a:hover,
[class*="social-nav"] a:hover,
[class*="social-menu"] a:hover {
	background: var(--accent-hover);
	border-color: var(--accent);
	transform: translateY(-2px);
	text-decoration: none;
}

.social-links a:focus-visible,
.social-icons a:focus-visible,
.social-links li a:focus-visible,
.social-icons li a:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
}

/* SVG icons inside social links */
.social-links svg,
.social-icons svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
	pointer-events: none;
}

/* Dashicons used by some plugins */
.social-links .dashicons,
.social-icons .dashicons {
	font-size: 20px;
	line-height: 1;
	width: 20px;
	height: 20px;
}

/* Font Awesome icons */
.social-links .fa,
.social-links .fab,
.social-links .fas,
.social-icons .fa,
.social-icons .fab,
.social-icons .fas {
	font-size: 18px;
}

/* ── WordPress core Social Links block (Gutenberg) ── */
.wp-block-social-links {
	gap: 10px !important;
}

.wp-block-social-links .wp-block-social-link {
	width: 48px !important;
	height: 48px !important;
	border-radius: 10px !important;
}

.wp-block-social-links .wp-block-social-link a {
	width: 48px !important;
	height: 48px !important;
	border-radius: 10px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Override the Gutenberg per-service brand colours with our AAA palette.
   This ensures contrast is always maintained. */
.wp-block-social-links.is-style-default .wp-block-social-link,
.wp-block-social-links.is-style-logos-only .wp-block-social-link,
.wp-block-social-links .wp-block-social-link {
	background: var(--accent) !important;
	color: var(--accent-text) !important;
}

.wp-block-social-links .wp-block-social-link:hover {
	background: var(--accent-hover) !important;
}

/* ══════════════════════════════════════════════════════════════════
   CONTACT PAGE — button & form improvements
   ══════════════════════════════════════════════════════════════════ */

/* Contact Form 7 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea,
.wpcf7-form select {
	width: 100%;
	background: var(--bg);
	border: 2px solid var(--border);      /* 2px — more visible than 1px */
	border-radius: 8px;
	padding: 12px 16px;
	color: var(--fg);
	font: inherit;
	font-size: 1rem;                       /* 16px — prevents iOS zoom */
	min-height: 48px;
	display: block;
	margin-bottom: 16px;
	transition: border-color 140ms, box-shadow 140ms;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-subtle);
}

.wpcf7-form textarea { min-height: 140px; resize: vertical; }

/* CF7 labels */
.wpcf7-form label,
.wpcf7 label {
	display: block;
	font-weight: 700;
	font-size: 0.9rem;
	margin-bottom: 6px;
	color: var(--fg);
}

/* CF7 submit button — large, orange-on-navy, AAA */
.wpcf7-form input[type="submit"],
.wpcf7-submit {
	appearance: none;
	background: var(--accent);
	color: var(--accent-text);
	border: 2px solid var(--accent);
	border-radius: 8px;
	padding: 14px 28px;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	min-height: 52px;                      /* Generous touch target */
	min-width: 160px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	letter-spacing: 0.02em;
	transition: background 140ms, border-color 140ms, transform 120ms;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-submit:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
}

.wpcf7-form input[type="submit"]:focus-visible,
.wpcf7-submit:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
}

.wpcf7-form input[type="submit"]:active { transform: translateY(1px); }

/* CF7 validation messages */
.wpcf7-not-valid-tip {
	color: var(--fail) !important;
	font-size: 0.85rem;
	font-weight: 600;
	margin-top: -10px;
	margin-bottom: 12px;
	display: block;
}

.wpcf7-validation-errors,
.wpcf7-acceptance-missing {
	background: var(--fail-bg);
	color: var(--fail);
	border: 1px solid var(--fail);
	border-left: 4px solid var(--fail);
	border-radius: 8px;
	padding: 12px 16px;
	font-weight: 600;
	margin: 12px 0;
}

.wpcf7-mail-sent-ok {
	background: var(--pass-bg);
	color: var(--pass);
	border: 1px solid var(--pass);
	border-left: 4px solid var(--pass);
	border-radius: 8px;
	padding: 12px 16px;
	font-weight: 600;
	margin: 12px 0;
}

/* WPForms */
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select {
	border: 2px solid var(--border) !important;
	border-radius: 8px !important;
	padding: 12px 16px !important;
	font-size: 1rem !important;
	min-height: 48px !important;
	background: var(--bg) !important;
	color: var(--fg) !important;
	transition: border-color 140ms !important;
}
.wpforms-field input:focus,
.wpforms-field textarea:focus {
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 3px var(--accent-subtle) !important;
	outline: none !important;
}

.wpforms-submit-container .wpforms-submit {
	background: var(--accent) !important;
	color: var(--accent-text) !important;
	border: 2px solid var(--accent) !important;
	border-radius: 8px !important;
	padding: 14px 28px !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	min-height: 52px !important;
	cursor: pointer !important;
	transition: background 140ms !important;
}
.wpforms-submit-container .wpforms-submit:hover {
	background: var(--accent-hover) !important;
	border-color: var(--accent-hover) !important;
}

/* ── Generic contact page layout helper ── */
.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	margin-top: 24px;
}

@media (max-width: 768px) {
	.contact-grid { grid-template-columns: 1fr; }
}

/* Contact info block */
.contact-info-block {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius);
	padding: 24px;
	box-shadow: var(--shadow);
}

.contact-info-block h3 { margin-top: 0; }

.contact-info-block a {
	color: var(--accent);
	font-weight: 600;
	text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER WIDGET COLUMNS
   ══════════════════════════════════════════════════════════════════ */

.footer-widgets {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin-bottom: 32px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--border);
	text-align: left;
}

@media (max-width: 768px) {
	.footer-widgets { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   SECTION HEADING (front page latest posts heading)
   ══════════════════════════════════════════════════════════════════ */

.section-heading {
	font-size: 1.3rem;
	font-weight: 700;
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--accent);
	display: inline-block;
}

/* ══════════════════════════════════════════════════════════════════
   PATCH v1.1 — Targeted fixes for three confirmed issues:
   1. SLD link text unreadable in light mode
   2. Filter/selector buttons too bright in dark mode  
   3. Jetpack share buttons not responding to theme toggle
   ══════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   FIX 1: SLD link text — light mode readability
   The plugin renders links as <a> inside .qcld-new-ca-content-outer.
   ca-main is the title link; we also need to catch the raw <a> tags
   inside ca-menu li that don't get the ca-main class.
   ──────────────────────────────────────────────────────────────── */

/* Raw link fallback — catches any <a> inside the list Jetpack doesn't
   give ca-main to. Light: navy #061528 on white = 18.3:1 AAA. */
ul.ca-menu li a,
.qcopd-single-list a {
  color: var(--fg) !important;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 120ms;
}
ul.ca-menu li a:hover,
.qcopd-single-list a:hover {
  color: var(--accent) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ca-main title links — explicit colour in both modes */
a.ca-main,
.ca-content a.ca-main {
  color: var(--accent) !important;    /* navy light / orange dark — both AAA */
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  line-height: 1.35;
}
a.ca-main:hover,
.ca-content a.ca-main:hover {
  color: var(--accent-hover) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ca-sub description text — explicit muted colour both modes */
.ca-sub,
.qcld-new-ca-content-outer .ca-sub {
  color: var(--fg-muted) !important;
  font-size: 0.8rem;
  line-height: 1.45;
}

/* Dark mode — links become orange (7.1:1 AAA on dark card #0d2040) */
[data-theme="dark"] ul.ca-menu li a,
[data-theme="dark"] .qcopd-single-list a {
  color: var(--fg) !important;   /* white */
}
[data-theme="dark"] ul.ca-menu li a:hover,
[data-theme="dark"] .qcopd-single-list a:hover {
  color: var(--accent) !important;  /* orange */
}
[data-theme="dark"] a.ca-main,
[data-theme="dark"] .ca-content a.ca-main {
  color: #63D2FF !important;   /* sky-blue 10.6:1 AAA on dark card */
}
[data-theme="dark"] a.ca-main:hover {
  color: #ffffff !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) ul.ca-menu li a { color: var(--fg) !important; }
  :root:not([data-theme="light"]) a.ca-main { color: #63D2FF !important; }
}

/* ────────────────────────────────────────────────────────────────
   FIX 2: Filter / selector buttons — dark mode too bright
   In dark mode --neutral-bg is #1a3050 and --fg is #ffffff —
   the buttons were rendering as bright white text on a light mid-blue
   which was jarring. We give them a subtler dark treatment.
   ──────────────────────────────────────────────────────────────── */

/* Dark mode inactive filter buttons:
   Bg = slightly lighter than card (#0d2040), border = visible but soft,
   text = sky-blue (10.6:1 AAA) */
[data-theme="dark"] a.filter-btn {
  background: rgba(99, 210, 255, 0.08) !important;  /* very subtle blue tint */
  color: #63D2FF !important;                          /* sky-blue 10.6:1 AAA  */
  border-color: rgba(99, 210, 255, 0.25) !important;
}
[data-theme="dark"] a.filter-btn:hover {
  background: rgba(99, 210, 255, 0.18) !important;
  border-color: rgba(99, 210, 255, 0.5) !important;
  color: #ffffff !important;
}
[data-theme="dark"] a.filter-btn.filter-active {
  background: #FF7C00 !important;   /* orange — 7.1:1 AAA on dark bg */
  color: #061528 !important;         /* navy  — 7.1:1 AAA */
  border-color: #FF7C00 !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) a.filter-btn {
    background: rgba(99, 210, 255, 0.08) !important;
    color: #63D2FF !important;
    border-color: rgba(99, 210, 255, 0.25) !important;
  }
  :root:not([data-theme="light"]) a.filter-btn.filter-active {
    background: #FF7C00 !important;
    color: #061528 !important;
    border-color: #FF7C00 !important;
  }
}

/* Same treatment for the tag filter pills */
[data-theme="dark"] a.sld_tag_filter {
  background: rgba(99, 210, 255, 0.08) !important;
  color: #63D2FF !important;
  border-color: rgba(99, 210, 255, 0.25) !important;
}
[data-theme="dark"] a.sld_tag_filter:hover,
[data-theme="dark"] a.sld_tag_filter.active {
  background: #FF7C00 !important;
  color: #061528 !important;
  border-color: #FF7C00 !important;
}

/* ────────────────────────────────────────────────────────────────
   FIX 3: Jetpack "Share This" buttons — theme toggle not switching
   
   Root cause: Jetpack's own stylesheet (loaded after ours) uses
   high-specificity selectors like:
     .sd-content ul li .sd-button { background-color: ... }
   Our a.sd-button rules don't beat that specificity.
   
   Solution: use html[data-theme] prefix to raise our specificity
   above Jetpack's sheet, AND target the full selector path Jetpack uses.
   
   The actual rendered HTML is:
   <div class="sd-content">
     <ul>
       <li class="share-mastodon">
         <a class="share-mastodon sd-button share-icon" href="...">
   ──────────────────────────────────────────────────────────────── */

/* Base state — both modes — maximum specificity to beat Jetpack */
html .sd-content ul li a.sd-button,
html .sd-content ul li .sd-button,
html .sharedaddy .sd-button,
html body .sd-button {
  background: var(--accent) !important;
  color: var(--accent-text) !important;
  border: 2px solid var(--accent) !important;
  border-radius: 8px !important;
  padding: 7px 14px !important;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  text-decoration: none !important;
  transition: background 140ms, color 140ms, border-color 140ms !important;
}
html .sd-content ul li a.sd-button:hover,
html .sharedaddy .sd-button:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: var(--accent-text) !important;
  text-decoration: none !important;
}

/* Light mode explicit (navy bg / white text — 18.3:1 AAA) */
html[data-theme="light"] .sd-content ul li a.sd-button,
html[data-theme="light"] .sd-content ul li .sd-button,
html[data-theme="light"] .sharedaddy .sd-button {
  background: #061528 !important;
  color: #ffffff !important;
  border-color: #061528 !important;
}
html[data-theme="light"] .sd-content ul li a.sd-button:hover,
html[data-theme="light"] .sharedaddy .sd-button:hover {
  background: #0a2445 !important;
  border-color: #0a2445 !important;
  color: #ffffff !important;
}

/* Dark mode explicit (orange bg / navy text — 7.1:1 AAA) */
html[data-theme="dark"] .sd-content ul li a.sd-button,
html[data-theme="dark"] .sd-content ul li .sd-button,
html[data-theme="dark"] .sharedaddy .sd-button {
  background: #FF7C00 !important;
  color: #061528 !important;
  border-color: #FF7C00 !important;
}
html[data-theme="dark"] .sd-content ul li a.sd-button:hover,
html[data-theme="dark"] .sharedaddy .sd-button:hover {
  background: #ff8f1a !important;
  border-color: #ff8f1a !important;
  color: #061528 !important;
}

/* OS-level dark preference (no manual toggle) */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .sd-content ul li a.sd-button,
  html:not([data-theme="light"]) .sd-content ul li .sd-button,
  html:not([data-theme="light"]) .sharedaddy .sd-button {
    background: #FF7C00 !important;
    color: #061528 !important;
    border-color: #FF7C00 !important;
  }
}

/* Noticons (Jetpack icon font glyphs) — inherit colour from button */
html .sd-button .noticon,
html .sd-button:before,
html .sd-content a.sd-button:before {
  color: inherit !important;
  font-size: 1rem !important;
}


/* ══════════════════════════════════════════════════════════════════
   JETPACK SHARING — NEW UI (2024+)
   The screenshot shows the updated Jetpack sharing block which uses
   a completely different class structure from the old .sd-button.
   New selectors observed: .wp-block-jetpack-sharing-button__button,
   .jetpack-sharing-buttons__services-list li a,
   and the "icon + text" style buttons with SVG icons.
   We also target the older .sd-social-icon-text variant.
   ══════════════════════════════════════════════════════════════════ */

/* ── New Jetpack sharing block wrapper ── */
.jetpack-sharing-buttons__services-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}
.jetpack-sharing-buttons__services-list li {
  margin: 0 !important;
  padding: 0 !important;
}

/* The button link — all variants */
.jetpack-sharing-buttons__services-list li a,
.wp-block-jetpack-sharing-button__button,
a.jetpack-sharing-button__button,
.jetpack-sharing-buttons a,
/* Also catch the "icon + text" style that shows in the screenshot */
.sd-social-icon-text .sd-button,
.sd-social-icon-text a.sd-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 44px !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font: inherit !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 140ms, color 140ms, border-color 140ms !important;
  /* Light mode: navy background, white text — 18.3:1 AAA */
  background: #061528 !important;
  color: #ffffff !important;
  border: 2px solid #061528 !important;
  box-shadow: none !important;
}

.jetpack-sharing-buttons__services-list li a:hover,
.wp-block-jetpack-sharing-button__button:hover,
.jetpack-sharing-buttons a:hover {
  background: #0a2445 !important;
  border-color: #0a2445 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
.jetpack-sharing-buttons__services-list li a:focus-visible,
.wp-block-jetpack-sharing-button__button:focus-visible {
  outline: 3px solid #FF7C00 !important;
  outline-offset: 3px !important;
}

/* SVG icons inside new Jetpack buttons */
.jetpack-sharing-buttons__services-list li a svg,
.wp-block-jetpack-sharing-button__button svg,
.jetpack-sharing-buttons a svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
  flex-shrink: 0 !important;
}

/* Dark mode — orange background, navy text — 7.1:1 AAA */
html[data-theme="dark"] .jetpack-sharing-buttons__services-list li a,
html[data-theme="dark"] .wp-block-jetpack-sharing-button__button,
html[data-theme="dark"] .jetpack-sharing-buttons a,
html[data-theme="dark"] .sd-social-icon-text .sd-button,
html[data-theme="dark"] .sd-social-icon-text a.sd-button {
  background: #FF7C00 !important;
  color: #061528 !important;
  border-color: #FF7C00 !important;
}
html[data-theme="dark"] .jetpack-sharing-buttons__services-list li a:hover,
html[data-theme="dark"] .wp-block-jetpack-sharing-button__button:hover {
  background: #ff8f1a !important;
  border-color: #ff8f1a !important;
  color: #061528 !important;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .jetpack-sharing-buttons__services-list li a,
  html:not([data-theme="light"]) .wp-block-jetpack-sharing-button__button,
  html:not([data-theme="light"]) .jetpack-sharing-buttons a {
    background: #FF7C00 !important;
    color: #061528 !important;
    border-color: #FF7C00 !important;
  }
}

/* ── "Share this:" label ── */
.jetpack-sharing-buttons__heading,
.sd-title.sharing-label {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: var(--fg-muted) !important;
  margin-bottom: 10px !important;
}

/* ── "Customise buttons" link ── */
a.sharing-anchor {
  font-size: 0.8rem !important;
  color: var(--fg-muted) !important;
  text-decoration: underline !important;
}

/* ══════════════════════════════════════════════════════════════════
   SLD LINK ITEM CARDS — light mode text contrast fix
   The plugin renders each link inside a light-blue card
   (.qcld-new-ca-content-outer with a light background).
   Text must be dark enough against that card bg.
   ══════════════════════════════════════════════════════════════════ */

/* The card row background the plugin applies */
.qcld-new-ca-content-outer {
  background: transparent !important;
}

/* Title link — in light mode use navy, not the plugin's default */
html[data-theme="light"] .ca-main,
html[data-theme="light"] a.ca-main,
html[data-theme="light"] ul.ca-menu li a {
  color: #061528 !important;   /* navy — 18.3:1 on white */
}
html[data-theme="light"] .ca-main:hover,
html[data-theme="light"] a.ca-main:hover {
  color: #FF7C00 !important;   /* orange on hover */
}
html[data-theme="light"] .ca-sub {
  color: #4b5563 !important;   /* muted — 7.6:1 AAA */
}

/* OS-preference light mode fallback */
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .ca-main,
  html:not([data-theme="dark"]) a.ca-main,
  html:not([data-theme="dark"]) ul.ca-menu li a {
    color: #061528 !important;
  }
  html:not([data-theme="dark"]) .ca-sub {
    color: #4b5563 !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   SLD — DEFINITIVE LIGHT/DARK RULES  (replaces all earlier patches)
   Strategy: plugin fields cleared → plugin outputs no inline styles
   → these rules win cleanly in both modes.
   Specificity uses html[data-theme] prefix to beat the plugin's
   per-list #id selectors.
   ══════════════════════════════════════════════════════════════════ */

/* ── Shared structural resets ── */
.qcld-main-container-style-1 ul.ca-menu li,
.qcopd-list-hoder ul.ca-menu li {
  background: transparent !important;
}
.qcld-new-ca-content-outer { background: transparent !important; }

/* ── LIGHT MODE ── */
html[data-theme="light"] [id*="qcopd-list-"] ul.ca-menu li,
html[data-theme="light"] .qcopd-list-hoder ul.ca-menu li {
  background: #ffffff !important;
}
html[data-theme="light"] [id*="qcopd-list-"] ul.ca-menu li:hover,
html[data-theme="light"] .qcopd-list-hoder ul.ca-menu li:hover {
  background: #f4f6f8 !important;
}
/* Title link */
html[data-theme="light"] [id*="qcopd-list-"] ul.ca-menu li .ca-main,
html[data-theme="light"] .qcopd-list-hoder ul.ca-menu li .ca-main,
html[data-theme="light"] [id*="qcopd-list-"] ul.ca-menu li h3.ca-main {
  color: #061528 !important;   /* navy — 18.3:1 AAA on white */
}
html[data-theme="light"] [id*="qcopd-list-"] ul.ca-menu li:hover .ca-main,
html[data-theme="light"] .qcopd-list-hoder ul.ca-menu li:hover .ca-main {
  color: #FF7C00 !important;   /* orange on hover */
}
/* Description */
html[data-theme="light"] [id*="qcopd-list-"] ul.ca-menu li .ca-sub,
html[data-theme="light"] .qcopd-list-hoder ul.ca-menu li .ca-sub {
  color: #4b5563 !important;   /* muted — 7.6:1 AAA */
}
html[data-theme="light"] [id*="qcopd-list-"] ul.ca-menu li:hover .ca-sub {
  color: #061528 !important;
}
/* Category heading */
html[data-theme="light"] .qcopd-single-list h2,
html[data-theme="light"] .qcopd-single-list h3 {
  color: #061528 !important;
  border-bottom-color: #FF7C00 !important;
}

/* ── DARK MODE ── */
html[data-theme="dark"] [id*="qcopd-list-"] ul.ca-menu li,
html[data-theme="dark"] .qcopd-list-hoder ul.ca-menu li {
  background: #0d2040 !important;   /* dark card */
}
html[data-theme="dark"] [id*="qcopd-list-"] ul.ca-menu li:hover,
html[data-theme="dark"] .qcopd-list-hoder ul.ca-menu li:hover {
  background: #1a3050 !important;
}
/* Title link */
html[data-theme="dark"] [id*="qcopd-list-"] ul.ca-menu li .ca-main,
html[data-theme="dark"] .qcopd-list-hoder ul.ca-menu li .ca-main,
html[data-theme="dark"] [id*="qcopd-list-"] ul.ca-menu li h3.ca-main {
  color: #63D2FF !important;   /* sky-blue — 10.6:1 AAA on #0d2040 */
}
html[data-theme="dark"] [id*="qcopd-list-"] ul.ca-menu li:hover .ca-main {
  color: #ffffff !important;
}
/* Description */
html[data-theme="dark"] [id*="qcopd-list-"] ul.ca-menu li .ca-sub,
html[data-theme="dark"] .qcopd-list-hoder ul.ca-menu li .ca-sub {
  color: #63D2FF !important;   /* sky-blue — 10.6:1 AAA */
}
/* Category heading */
html[data-theme="dark"] .qcopd-single-list h2,
html[data-theme="dark"] .qcopd-single-list h3 {
  color: #ffffff !important;
  border-bottom-color: #FF7C00 !important;
}

/* ── OS preference fallbacks (no manual toggle set) ── */
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) [id*="qcopd-list-"] ul.ca-menu li { background: #ffffff !important; }
  html:not([data-theme="dark"]) [id*="qcopd-list-"] ul.ca-menu li .ca-main { color: #061528 !important; }
  html:not([data-theme="dark"]) [id*="qcopd-list-"] ul.ca-menu li .ca-sub  { color: #4b5563 !important; }
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) [id*="qcopd-list-"] ul.ca-menu li { background: #0d2040 !important; }
  html:not([data-theme="light"]) [id*="qcopd-list-"] ul.ca-menu li .ca-main { color: #63D2FF !important; }
  html:not([data-theme="light"]) [id*="qcopd-list-"] ul.ca-menu li .ca-sub  { color: #63D2FF !important; }
}

/* ── Filter buttons — light mode (inline style stripped by PHP) ── */
html[data-theme="light"] a.filter-btn {
  background: #f0f2f5 !important;
  color: #061528 !important;
  border: 2px solid #d1d5db !important;
}
html[data-theme="light"] a.filter-btn:hover {
  background: rgba(6,21,40,.08) !important;
  border-color: #061528 !important;
  color: #061528 !important;
}
html[data-theme="light"] a.filter-btn.filter-active {
  background: #061528 !important;
  color: #ffffff !important;
  border-color: #061528 !important;
}

/* ── Filter buttons — dark mode ── */
html[data-theme="dark"] a.filter-btn {
  background: rgba(99,210,255,.08) !important;
  color: #63D2FF !important;
  border: 2px solid rgba(99,210,255,.25) !important;
}
html[data-theme="dark"] a.filter-btn:hover {
  background: rgba(99,210,255,.18) !important;
  border-color: rgba(99,210,255,.5) !important;
  color: #ffffff !important;
}
html[data-theme="dark"] a.filter-btn.filter-active {
  background: #FF7C00 !important;
  color: #061528 !important;
  border-color: #FF7C00 !important;
}

/* ── OS preference filter fallbacks ── */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) a.filter-btn {
    background: rgba(99,210,255,.08) !important;
    color: #63D2FF !important;
    border: 2px solid rgba(99,210,255,.25) !important;
  }
  html:not([data-theme="light"]) a.filter-btn.filter-active {
    background: #FF7C00 !important;
    color: #061528 !important;
    border-color: #FF7C00 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   JETPACK SHARING BUTTONS — COMPLETE REPLACEMENT STYLESHEET
   (Jetpack's "Disable CSS and JS" is ticked, so sharing.css and
   social-logos.css no longer load from Jetpack. This block is the
   full replacement, loaded from our theme stylesheet which runs
   after wp_head at the theme's own priority — no !important needed
   for layout, only for the few colour rules we want to keep
   hard-locked against any inline styles.)
   
   The social-logos icon font is re-enqueued in functions.php.
   The sharing JS is re-enqueued in functions.php.
   ══════════════════════════════════════════════════════════════════ */

/* ── Wrapper ── */
div.sharedaddy {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  clear: both;
}
div.sharedaddy .sd-block { padding: 0; }

/* ── Section heading ── */
.sharedaddy h3.sd-title,
.sharedaddy .sd-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--fg-muted);
  margin: 0 0 10px;
  display: block;
}

/* ── Button list ── */
.sd-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.sd-content ul li {
  margin: 0;
  padding: 0;
  float: none;
}

/* ── "More" hidden list ── */
.sd-content .sharing-hidden .inner {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: var(--shadow);
  z-index: 100;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── THE BUTTON — light mode ──
   Navy background (#061528), white text — 18.3:1 AAA.
   No !important needed: Jetpack's sheet is disabled. */
a.sd-button,
.sd-content ul li a.sd-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 2px solid #061528;
  background: #061528;
  color: #ffffff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms, border-color 140ms, color 140ms, transform 120ms;
  box-shadow: none;
}
a.sd-button:hover,
.sd-content ul li a.sd-button:hover {
  background: #0a2445;
  border-color: #0a2445;
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
}
a.sd-button:focus-visible,
.sd-content ul li a.sd-button:focus-visible {
  outline: 3px solid #FF7C00;
  outline-offset: 3px;
}
a.sd-button:active { transform: translateY(1px); }

/* ── Icon (noticon font glyph) ── */
a.sd-button .noticon,
a.sd-button .share-icon {
  font-size: 1rem;
  line-height: 1;
  color: inherit;
  flex-shrink: 0;
}

/* ── SVG icons inside buttons ── */
a.sd-button svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

/* ── "Customise buttons" link ── */
a.sharing-anchor {
  font-size: 0.78rem;
  color: var(--fg-muted);
  text-decoration: underline;
  display: inline-block;
  margin-top: 6px;
}
a.sharing-anchor:hover { color: var(--accent); }

/* ── DARK MODE — orange bg, navy text — 7.1:1 AAA ──
   These use html[data-theme] so they switch instantly with the
   toggle. No !important needed since Jetpack's sheet is disabled. */
html[data-theme="dark"] a.sd-button,
html[data-theme="dark"] .sd-content ul li a.sd-button {
  background: #FF7C00;
  border-color: #FF7C00;
  color: #061528;
}
html[data-theme="dark"] a.sd-button:hover,
html[data-theme="dark"] .sd-content ul li a.sd-button:hover {
  background: #ff8f1a;
  border-color: #ff8f1a;
  color: #061528;
}
html[data-theme="dark"] .sharedaddy h3.sd-title,
html[data-theme="dark"] .sharedaddy .sd-title {
  color: #63D2FF;
}
html[data-theme="dark"] .sd-content .sharing-hidden .inner {
  background: #0d2040;
  border-color: #1a3050;
}

/* ── OS-preference dark (no manual toggle) ── */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) a.sd-button,
  html:not([data-theme="light"]) .sd-content ul li a.sd-button {
    background: #FF7C00;
    border-color: #FF7C00;
    color: #061528;
  }
  html:not([data-theme="light"]) a.sd-button:hover {
    background: #ff8f1a;
    border-color: #ff8f1a;
    color: #061528;
  }
  html:not([data-theme="light"]) .sharedaddy h3.sd-title { color: #63D2FF; }
}

/* ── Like button wrapper (Jetpack Likes) ── */
.sd-block.sd-like {
  border-top: 1px solid var(--border);
  margin-top: 16px;
  padding-top: 14px;
}

/* ══════════════════════════════════════════════════════════════════
   PATCH BLOCK — fixes for cache-reordered CSS
   Using !important throughout so these survive minifier reordering.
   ══════════════════════════════════════════════════════════════════ */

/* ── WPForms submit button ── */
button.wpforms-submit,
.wpforms-form .wpforms-submit {
  background: #FF7C00 !important;   /* orange — brand CTA */
  color: #061528 !important;        /* navy — 7.1:1 AAA */
  border: 2px solid #FF7C00 !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 140ms, border-color 140ms !important;
}
button.wpforms-submit:hover,
.wpforms-form .wpforms-submit:hover {
  background: #e66e00 !important;
  border-color: #e66e00 !important;
}
button.wpforms-submit:focus-visible,
.wpforms-form .wpforms-submit:focus-visible {
  outline: 3px solid #061528 !important;
  outline-offset: 3px !important;
}
html[data-theme="dark"] button.wpforms-submit,
html[data-theme="dark"] .wpforms-form .wpforms-submit {
  background: #FF7C00 !important;
  color: #061528 !important;
  border-color: #FF7C00 !important;
}

/* ── Jetpack sharing buttons — full replacement (no Jetpack CSS loads) ── */
div.sharedaddy { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border); clear: both; }
div.sharedaddy h3.sd-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-muted); margin: 0 0 .6rem; }
.sd-content ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.sd-content ul li { margin: 0 !important; padding: 0 !important; float: none !important; }
a.sd-button,
.sd-content ul li a.sd-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 40px !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  border: 2px solid #061528 !important;
  background: #061528 !important;
  color: #ffffff !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: background 140ms, transform 120ms !important;
}
a.sd-button:hover,
.sd-content ul li a.sd-button:hover {
  background: #0a2445 !important;
  border-color: #0a2445 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}
a.sd-button:focus-visible { outline: 3px solid #FF7C00 !important; outline-offset: 3px !important; }
html[data-theme="dark"] a.sd-button,
html[data-theme="dark"] .sd-content ul li a.sd-button {
  background: #FF7C00 !important;
  border-color: #FF7C00 !important;
  color: #061528 !important;
}
html[data-theme="dark"] a.sd-button:hover,
html[data-theme="dark"] .sd-content ul li a.sd-button:hover {
  background: #ff8f1a !important;
  border-color: #ff8f1a !important;
  color: #061528 !important;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) a.sd-button { background: #FF7C00 !important; border-color: #FF7C00 !important; color: #061528 !important; }
}

/* ── SLD search input — white text fix ── */
input.sld-search,
.sld-top-area input[type="text"],
.qcopd-directory input.sld-search {
  color: #061528 !important;   /* navy on white — plugin sets white */
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
}
html[data-theme="dark"] input.sld-search,
html[data-theme="dark"] .sld-top-area input[type="text"] {
  color: #ffffff !important;
  background: #0d2040 !important;
  border-color: #1a3050 !important;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) input.sld-search { color: #ffffff !important; background: #0d2040 !important; border-color: #1a3050 !important; }
}

/* ── SLD tag filters (All / Course / Resource Hubs) ── */
a.sld_tag_filter {
  color: #4b5563 !important;
  background: transparent !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  padding: 2px 4px !important;
}
a.sld_tag_filter:hover,
a.sld_tag_filter.active-tag {
  color: #FF7C00 !important;
  text-decoration: underline !important;
}
html[data-theme="dark"] a.sld_tag_filter { color: #63D2FF !important; }
html[data-theme="dark"] a.sld_tag_filter:hover,
html[data-theme="dark"] a.sld_tag_filter.active-tag { color: #ffffff !important; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) a.sld_tag_filter { color: #63D2FF !important; }
}

/* ── SLD filter buttons dark mode (overrides SLD Custom CSS if cache reorders) ── */
html[data-theme="dark"] a.filter-btn {
  background: rgba(99,210,255,0.08) !important;
  color: #63D2FF !important;
  border: 2px solid rgba(99,210,255,0.25) !important;
}
html[data-theme="dark"] a.filter-btn:hover {
  background: rgba(99,210,255,0.18) !important;
  border-color: rgba(99,210,255,0.5) !important;
  color: #ffffff !important;
}
html[data-theme="dark"] a.filter-btn.filter-active {
  background: #FF7C00 !important;
  color: #061528 !important;
  border-color: #FF7C00 !important;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) a.filter-btn { background: rgba(99,210,255,0.08) !important; color: #63D2FF !important; border: 2px solid rgba(99,210,255,0.25) !important; }
  html:not([data-theme="light"]) a.filter-btn.filter-active { background: #FF7C00 !important; color: #061528 !important; border-color: #FF7C00 !important; }
}

/* ── SLD list item blue side borders — remove plugin's rgba border ── */
.qcld-main-container-style-1 .style-1 ul.ca-menu li,
[id*="qcopd-list-"] ul.ca-menu li {
  border-left: none !important;
  border-right: none !important;
}


/* ══════════════════════════════════════════════════════════════════
   v1.1.0 PATCH BLOCK
   ──────────────────────────────────────────────────────────────────
   1. SLD plugin dark-mode fixes  — kill the bright white filter
                                    panel, theme the tag label and
                                    search input properly.
   2. Jetpack "Like this" widget  — the iframe content lives on
                                    WordPress.com so we can't reach
                                    in. Use mix-blend-mode: lighten
                                    so the white iframe bg blends
                                    into the navy footer area without
                                    inverting the gravatar.
   3. Share This button icons     — inline two-tone SVG icons via
                                    CSS mask so they inherit
                                    currentColor (= navy on orange
                                    in dark, white on navy in light).
                                    Zero markup changes — Jetpack
                                    already gives us the class names.
                                    Footer social icons are handled
                                    separately in functions.php
                                    because they need actual SVG
                                    nodes in the markup for
                                    screen-reader friendliness.

   All rules are scoped narrowly and ordered after the existing
   sheet so they win the cascade without needing more !important
   than the upstream rules they're patching.
   ══════════════════════════════════════════════════════════════════ */


/* ── 1A. SLD filter-area: kill the hardcoded white panel ──
   Plugin's minified stylesheet has `.filter-area { background:#fff }`
   which creates a stark white container around the category filter
   buttons in dark mode. Make it transparent so the page bg shows
   through, and give it a subtle backdrop in light mode so the
   buttons still read as a grouped panel. */
.filter-area {
  background: transparent !important;
  padding: 8px 0 !important;
  border-radius: 8px;
}
html[data-theme="light"] .filter-area {
  background: #f0f2f5 !important;
  padding: 12px !important;
}

/* ── 1B. "Tags:" label + tag-filter wrapper ──
   Plugin colours the label #333 inline which is unreadable on navy.
   Re-anchor to our muted foreground token. */
.sld-tag-filter-area,
.sld-tag-filter-area * {
  color: var(--fg-muted) !important;
}
/* Re-assert pill link colours so they still respond to hover/active
   after the blanket rule above. */
a.sld_tag_filter {
  color: var(--fg) !important;
}
a.sld_tag_filter:hover {
  color: var(--accent) !important;
}
a.sld_tag_filter.active,
a.sld_tag_filter[data-tag=""].active {
  color: var(--accent-text) !important;
}

/* ── 1C. SLD search input themed via tokens ──
   Some plugin builds inline `style="background:#fff;color:#333"`. */
input.sld-search,
input.sld_search_filter,
.text-input.sld-search {
  background: var(--bg) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
}
input.sld-search::placeholder,
input.sld_search_filter::placeholder {
  color: var(--fg-muted) !important;
  opacity: 0.7;
}

/* ── 1D. SLD list-item headings/descriptions ──
   Plugin sometimes injects #4b5563 (dark grey) on subtitles which is
   unreadable on dark navy cards. */
.sld-category-title,
.qcld-sld-content-dividar,
.ca-main,
.ca-sub,
.ca-content,
.qcopd-single-list h2,
.qcopd-single-list h3 {
  color: var(--fg) !important;
}
html[data-theme="dark"] .ca-sub,
html[data-theme="dark"] .ca-content,
html[data-theme="dark"] .sld-list-desc,
html[data-theme="dark"] [class*="qcopd"] p {
  color: rgba(255, 255, 255, 0.85) !important;
}


/* ── 2. Jetpack "Like this" widget — minimal, left-aligned ──
   The widget structure: a single div carrying BOTH .sd-block.sd-like
   and .jetpack-likes-widget-wrapper classes, containing an h3.sd-title
   ("Like this:") and a placeholder div that Jetpack's JS replaces
   with a cross-origin iframe served by wordpress.com.

   History of failed attempts before this one:
   1. mix-blend-mode: lighten — wrong direction, kept the lighter
      pixel so a white iframe stayed white over navy.
   2. Tinted card wrap + brightness filter — turned the iframe grey
      with unreadable black text on grey background.

   Final approach: keep the iframe at its natural white-with-black-text
   appearance in both modes (it's small enough not to glare), left-
   align it like other body content, give the "Like this:" label a
   calm small treatment, no decorative line.

   IMPORTANT: all rules carry `!important` and include the more
   specific `html[data-theme="..."]` ancestor where needed because the
   W3 Total Cache minifier reorders rules (see comment at line ~3084).
   Without these the older cached `.sd-block.sd-like` rule wins. */

/* Outer wrapper — left-aligned, no card, no border. */
.sd-block.sd-like,
.jetpack-likes-widget-wrapper {
  display: block !important;
  max-width: 320px !important;
  margin: 24px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  text-align: left !important;
}

/* Heading — small calm label, sentence case, left-aligned. */
.sd-block.sd-like .sd-title,
.jetpack-likes-widget-wrapper h3.sd-title {
  display: block !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: var(--fg-muted) !important;
  text-align: left !important;
  width: auto !important;
}

/* Kill the decorative line the WP core adds via h3.sd-title::before. */
.sd-block.sd-like .sd-title::before,
.jetpack-likes-widget-wrapper h3.sd-title::before {
  display: none !important;
  content: none !important;
  border: 0 !important;
}

/* Iframe — natural white with black text, left-aligned, no filter.
   Selector includes html[data-theme="..."] ancestors specifically to
   beat the cached older brightness-filter rule from prior versions.

   NOTE: We deliberately do NOT include .likes-widget-placeholder in
   this rule. Jetpack swaps the placeholder out for the real iframe
   once its JS loads (adding class jetpack-likes-widget-loaded). If
   we force `display: block !important` on the placeholder, that swap
   breaks and both the placeholder and the iframe end up showing
   stacked. The placeholder gets its own rule below to coexist with
   Jetpack's swap logic. */
html[data-theme="dark"] .sd-block.sd-like iframe.post-likes-widget,
html[data-theme="dark"] .jetpack-likes-widget iframe,
html[data-theme="dark"] iframe.jetpack-likes-widget,
html[data-theme="light"] .sd-block.sd-like iframe.post-likes-widget,
html[data-theme="light"] .jetpack-likes-widget iframe,
html[data-theme="light"] iframe.jetpack-likes-widget,
.sd-block.sd-like iframe.post-likes-widget,
.jetpack-likes-widget iframe,
iframe.jetpack-likes-widget {
  width: 100% !important;
  max-width: 320px !important;
  margin: 0 !important;
  display: block !important;
  border-radius: 8px !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  background: #fff !important;
  color-scheme: light !important;
}

/* Placeholder — visible only while Jetpack is still loading. Once
   the wrapper gets class jetpack-likes-widget-loaded, Jetpack hides
   the placeholder via its own stylesheet. We bump specificity here
   so the hide rule wins over any cached `display: block` rules from
   prior theme versions, and make the visible state match the iframe
   width so there's no jump when the swap happens. */
.sd-block.sd-like .likes-widget-placeholder,
.jetpack-likes-widget-wrapper .likes-widget-placeholder {
  width: 100% !important;
  max-width: 320px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  background: #fff !important;
}

/* Force-hide the placeholder once Jetpack signals iframe is loaded.
   Specificity needs to beat the v1.2.5 cached rule which had
   (0,3,0); we use (0,4,0) by including .sd-block.sd-like in the
   ancestor chain. Both rules carry !important, so the higher
   specificity wins. */
.sd-block.sd-like.jetpack-likes-widget-loaded .likes-widget-placeholder,
.jetpack-likes-widget-wrapper.jetpack-likes-widget-loaded .likes-widget-placeholder {
  display: none !important;
}

/* Conversely, hide the iframe until Jetpack signals it's ready,
   so we don't get a flash of empty 55px iframe before content. */
.jetpack-likes-widget-loading iframe,
.jetpack-likes-widget-unloaded iframe {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════════════
   3. SHARE THIS BUTTON ICONS
   ──────────────────────────────────────────────────────────────────
   Jetpack already adds class="share-mastodon|share-twitter|..." on
   each button. We render the icon as a `::before` pseudo-element
   using `mask-image` (not background-image) so the icon takes the
   button's text colour via `background-color: currentColor`. That
   means one SVG per service works in both modes — navy on orange in
   dark mode, white on navy in light mode — with no extra rules.
   ══════════════════════════════════════════════════════════════════ */

.sd-content ul li a.sd-button::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  flex-shrink: 0;
  vertical-align: -3px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}

/* Mastodon */
.sd-content ul li a.share-mastodon::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M23.27 5.32C22.91 2.63 20.57.51 17.79.1 17.32.03 15.54 0 11.41 0 7.28 0 6.4.03 5.93.1 3.23.5.76 2.41.16 5.13 0 6.4.01 9.21.01 11.78c0 3.39.02 6.79.34 10.16.21 2.16 1.16 4 2.6 4.95 2.39 1.58 6.51 1.6 6.66 1.5l-.01-2.71s-2.46.81-4.85-.04c-1.6-.57-3.1-1.6-3.34-3.5-.02-.18-.04-.36-.04-.55 4.65 1.13 8.62.49 9.71.36 3.05-.36 5.71-2.24 6.05-3.95.53-2.7.49-6.59.49-6.59 0-3.36-.22-4.32-.35-5.09zM19.34 14.39h-2.4V8.5c0-1.24-.52-1.87-1.57-1.87-1.16 0-1.74.75-1.74 2.23v3.23h-2.39V8.86c0-1.48-.58-2.23-1.74-2.23-1.05 0-1.57.63-1.57 1.87v5.89h-2.4V8.32c0-1.24.32-2.22.95-2.95.65-.72 1.5-1.1 2.56-1.1 1.22 0 2.15.47 2.77 1.4l.6 1 .59-1c.62-.93 1.55-1.4 2.77-1.4 1.06 0 1.91.38 2.57 1.1.63.73.95 1.71.95 2.95v5.07z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M23.27 5.32C22.91 2.63 20.57.51 17.79.1 17.32.03 15.54 0 11.41 0 7.28 0 6.4.03 5.93.1 3.23.5.76 2.41.16 5.13 0 6.4.01 9.21.01 11.78c0 3.39.02 6.79.34 10.16.21 2.16 1.16 4 2.6 4.95 2.39 1.58 6.51 1.6 6.66 1.5l-.01-2.71s-2.46.81-4.85-.04c-1.6-.57-3.1-1.6-3.34-3.5-.02-.18-.04-.36-.04-.55 4.65 1.13 8.62.49 9.71.36 3.05-.36 5.71-2.24 6.05-3.95.53-2.7.49-6.59.49-6.59 0-3.36-.22-4.32-.35-5.09zM19.34 14.39h-2.4V8.5c0-1.24-.52-1.87-1.57-1.87-1.16 0-1.74.75-1.74 2.23v3.23h-2.39V8.86c0-1.48-.58-2.23-1.74-2.23-1.05 0-1.57.63-1.57 1.87v5.89h-2.4V8.32c0-1.24.32-2.22.95-2.95.65-.72 1.5-1.1 2.56-1.1 1.22 0 2.15.47 2.77 1.4l.6 1 .59-1c.62-.93 1.55-1.4 2.77-1.4 1.06 0 1.91.38 2.57 1.1.63.73.95 1.71.95 2.95v5.07z'/></svg>");
}

/* X (Twitter) */
.sd-content ul li a.share-twitter::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.66l-5.21-6.82-5.97 6.82H1.68l7.73-8.84L1.25 2.25h6.83l4.71 6.23zm-1.16 17.52h1.83L7.08 4.13H5.12z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.66l-5.21-6.82-5.97 6.82H1.68l7.73-8.84L1.25 2.25h6.83l4.71 6.23zm-1.16 17.52h1.83L7.08 4.13H5.12z'/></svg>");
}

/* Facebook */
.sd-content ul li a.share-facebook::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07c0 6.03 4.39 11.02 10.13 11.93v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.69.23 2.69.23v2.97h-1.51c-1.49 0-1.96.93-1.96 1.88v2.27h3.33l-.53 3.49h-2.8V24C19.61 23.09 24 18.1 24 12.07z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07c0 6.03 4.39 11.02 10.13 11.93v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.69.23 2.69.23v2.97h-1.51c-1.49 0-1.96.93-1.96 1.88v2.27h3.33l-.53 3.49h-2.8V24C19.61 23.09 24 18.1 24 12.07z'/></svg>");
}

/* LinkedIn */
.sd-content ul li a.share-linkedin::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.95v5.66H9.36V9h3.41v1.56h.05c.47-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 110-4.12 2.06 2.06 0 010 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.95v5.66H9.36V9h3.41v1.56h.05c.47-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 110-4.12 2.06 2.06 0 010 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z'/></svg>");
}

/* WhatsApp */
.sd-content ul li a.share-jetpack-whatsapp::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M17.5 14.4c-.3-.1-1.7-.8-2-1-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.5-2.3-1.4-.9-.7-1.4-1.7-1.6-2-.2-.3 0-.4.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4-.1-.5-.1-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4 0 1.4 1 2.8 1.2 3 .1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.5-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.5-.4zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.4 1.3 4.9L2 22l5.3-1.3c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18c-1.5 0-2.9-.4-4.2-1.1l-.3-.2-3.1.8.8-3.1-.2-.3c-.7-1.3-1.1-2.7-1.1-4.2 0-4.4 3.6-8 8-8s8 3.6 8 8-3.5 8.1-7.9 8.1z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M17.5 14.4c-.3-.1-1.7-.8-2-1-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.5-2.3-1.4-.9-.7-1.4-1.7-1.6-2-.2-.3 0-.4.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4-.1-.5-.1-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4 0 1.4 1 2.8 1.2 3 .1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.5-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.5-.4zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.4 1.3 4.9L2 22l5.3-1.3c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18c-1.5 0-2.9-.4-4.2-1.1l-.3-.2-3.1.8.8-3.1-.2-.3c-.7-1.3-1.1-2.7-1.1-4.2 0-4.4 3.6-8 8-8s8 3.6 8 8-3.5 8.1-7.9 8.1z'/></svg>");
}

/* Email */
.sd-content ul li a.share-email::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/></svg>");
}

/* "More" overflow */
.sd-content ul li a.share-more::before,
.sd-content ul li a.sharing-anchor::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='5' cy='12' r='2' fill='black'/><circle cx='12' cy='12' r='2' fill='black'/><circle cx='19' cy='12' r='2' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='5' cy='12' r='2' fill='black'/><circle cx='12' cy='12' r='2' fill='black'/><circle cx='19' cy='12' r='2' fill='black'/></svg>");
}

/* Print */
.sd-content ul li a.share-print::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/></svg>");
}

/* Reddit */
.sd-content ul li a.share-reddit::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 0a12 12 0 1012 12A12 12 0 0012 0zm6.71 13.4a2 2 0 01-3.71 1.05c-.84.55-2 .9-3 .9s-2.16-.35-3-.9a2 2 0 11-2.13-3.3 1.94 1.94 0 011.13-.36 2 2 0 011.5.68 7 7 0 013.83-1.18l.74-3.41a.27.27 0 01.32-.2l2.42.5a1.34 1.34 0 11-.13.6l-2.13-.45-.67 3.09a7 7 0 013.74 1.17 2 2 0 013.09 1.91zM9.5 13.5a1 1 0 11.94 0 1 1 0 01-.94 0zm5.5 0a1 1 0 11.94 0 1 1 0 01-.94 0z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 0a12 12 0 1012 12A12 12 0 0012 0zm6.71 13.4a2 2 0 01-3.71 1.05c-.84.55-2 .9-3 .9s-2.16-.35-3-.9a2 2 0 11-2.13-3.3 1.94 1.94 0 011.13-.36 2 2 0 011.5.68 7 7 0 013.83-1.18l.74-3.41a.27.27 0 01.32-.2l2.42.5a1.34 1.34 0 11-.13.6l-2.13-.45-.67 3.09a7 7 0 013.74 1.17 2 2 0 013.09 1.91zM9.5 13.5a1 1 0 11.94 0 1 1 0 01-.94 0zm5.5 0a1 1 0 11.94 0 1 1 0 01-.94 0z'/></svg>");
}

/* Tumblr */
.sd-content ul li a.share-tumblr::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14.6 0v5.6h4v3.7h-4V16c0 .9 0 1.4.1 1.7.1.2.3.5.6.6.4.2 1 .3 1.5.3.8 0 1.8-.2 2.6-.6V21c-.8.4-1.5.6-2.1.7-.7.1-1.3.2-2 .2-.9 0-1.6-.1-2.3-.3-.6-.2-1.2-.5-1.7-1-.4-.4-.8-.9-1-1.4-.2-.6-.3-1.3-.3-2.4V9.4H6.6V6.1c.9-.3 1.6-.7 2.3-1.3.6-.6 1.1-1.3 1.5-2.1.4-.8.6-1.8.8-2.7h3.4z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14.6 0v5.6h4v3.7h-4V16c0 .9 0 1.4.1 1.7.1.2.3.5.6.6.4.2 1 .3 1.5.3.8 0 1.8-.2 2.6-.6V21c-.8.4-1.5.6-2.1.7-.7.1-1.3.2-2 .2-.9 0-1.6-.1-2.3-.3-.6-.2-1.2-.5-1.7-1-.4-.4-.8-.9-1-1.4-.2-.6-.3-1.3-.3-2.4V9.4H6.6V6.1c.9-.3 1.6-.7 2.3-1.3.6-.6 1.1-1.3 1.5-2.1.4-.8.6-1.8.8-2.7h3.4z'/></svg>");
}

/* Pinterest */
.sd-content ul li a.share-pinterest::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 0C5.4 0 0 5.4 0 12c0 5 3.1 9.4 7.6 11.1-.1-1-.2-2.4 0-3.5.2-1 1.5-6.2 1.5-6.2s-.4-.7-.4-1.8c0-1.7 1-3 2.2-3 1 0 1.5.8 1.5 1.7 0 1-.7 2.6-1 4-.3 1.2.6 2.1 1.8 2.1 2.1 0 3.7-2.2 3.7-5.4 0-2.8-2-4.8-4.9-4.8-3.3 0-5.3 2.5-5.3 5.1 0 1 .4 2.1.9 2.6.1.1.1.2.1.3-.1.4-.3 1.2-.3 1.4 0 .2-.2.3-.4.2-1.4-.7-2.3-2.7-2.3-4.4 0-3.6 2.6-6.9 7.5-6.9 3.9 0 7 2.8 7 6.6 0 3.9-2.5 7.1-5.9 7.1-1.2 0-2.2-.6-2.6-1.3 0 0-.6 2.2-.7 2.7-.3 1-.9 2.2-1.4 3C9.5 23.9 10.7 24 12 24c6.6 0 12-5.4 12-12S18.6 0 12 0z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 0C5.4 0 0 5.4 0 12c0 5 3.1 9.4 7.6 11.1-.1-1-.2-2.4 0-3.5.2-1 1.5-6.2 1.5-6.2s-.4-.7-.4-1.8c0-1.7 1-3 2.2-3 1 0 1.5.8 1.5 1.7 0 1-.7 2.6-1 4-.3 1.2.6 2.1 1.8 2.1 2.1 0 3.7-2.2 3.7-5.4 0-2.8-2-4.8-4.9-4.8-3.3 0-5.3 2.5-5.3 5.1 0 1 .4 2.1.9 2.6.1.1.1.2.1.3-.1.4-.3 1.2-.3 1.4 0 .2-.2.3-.4.2-1.4-.7-2.3-2.7-2.3-4.4 0-3.6 2.6-6.9 7.5-6.9 3.9 0 7 2.8 7 6.6 0 3.9-2.5 7.1-5.9 7.1-1.2 0-2.2-.6-2.6-1.3 0 0-.6 2.2-.7 2.7-.3 1-.9 2.2-1.4 3C9.5 23.9 10.7 24 12 24c6.6 0 12-5.4 12-12S18.6 0 12 0z'/></svg>");
}

/* Telegram */
.sd-content ul li a.share-telegram::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.9 8.2-2 9.3c-.1.7-.5.8-1.1.5l-3.1-2.3-1.5 1.4c-.2.2-.3.3-.6.3l.2-3.2 5.8-5.2c.3-.2-.1-.4-.5-.2L8 12.3l-3.1-1c-.7-.2-.7-.7.1-1l12.1-4.7c.5-.2 1 .1.8 1.6z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.9 8.2-2 9.3c-.1.7-.5.8-1.1.5l-3.1-2.3-1.5 1.4c-.2.2-.3.3-.6.3l.2-3.2 5.8-5.2c.3-.2-.1-.4-.5-.2L8 12.3l-3.1-1c-.7-.2-.7-.7.1-1l12.1-4.7c.5-.2 1 .1.8 1.6z'/></svg>");
}


/* ── 4. Footer social-icon SVGs (markup injected by functions.php) ──
   The SVGs themselves use currentColor so they inherit the link
   colour automatically. These rules just size and align them. */
.site-footer .footer-nav a {
  display: inline-flex !important;
  align-items: center;
}
.site-footer .footer-nav a .footer-social-icon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  flex-shrink: 0;
  fill: currentColor;
  transition: color 140ms;
}
.site-footer .footer-nav a:hover .footer-social-icon,
.site-footer .footer-nav a:focus-visible .footer-social-icon {
  color: var(--accent);
}

/* End of v1.1.0 patch block */


/* ══════════════════════════════════════════════════════════════════
   v1.2.0 PATCH BLOCK
   ──────────────────────────────────────────────────────────────────
   1. CONDITIONAL SIDEBAR LAYOUT — the existing .content-sidebar-wrap
      always allocated a 300px phantom right column even when the
      sidebar had no widgets. Now it switches to single-column when
      the body has the `no-sidebar` class (already set in
      functions.php whenever sidebar-1 is empty or on static pages).
   2. AUTHOR BIO — pulls avatar + name + bio from the WordPress user
      profile. Auto-injected by a the_content filter; the single
      switch is whether the profile's Biographical Info is filled in.
      No template parts, no shortcodes, no per-post toggles.
   3. CREDLY IFRAME DARK BLEND — same mix-blend-mode treatment as
      the Jetpack Like widget. Applies anywhere a Credly badge ends
      up (sidebar widget, footer widget, embedded in page content).
   ══════════════════════════════════════════════════════════════════ */


/* ── 1. Conditional sidebar layout ──
   Body has either `has-sidebar` (widgets present, sidebar renders)
   or `no-sidebar` (sidebar-1 empty, or this is a static page). The
   functions.php body_class filter sets these; we just respond. */
body.no-sidebar .content-sidebar-wrap {
  grid-template-columns: 1fr !important;
}

/* When the sidebar is hidden, make sure no .sidebar markup
   that snuck through still claims layout space. */
body.no-sidebar .sidebar,
body.no-sidebar #secondary {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════════════
   2. AUTHOR BIO BLOCK
   ──────────────────────────────────────────────────────────────────
   Auto-injected after the post content via the_content filter (see
   timdixon_append_author_bio in functions.php). The single switch
   for whether it renders is the author's "Biographical Info" field
   in Users → Profile.

   Layout: 96px avatar + name on top row (flex), bio paragraph
   below. Card-styled to match the rest of the theme.
   ══════════════════════════════════════════════════════════════════ */

.author-bio {
  margin: 40px 0 24px;
  padding: 24px 28px;
  background: var(--bg-card, var(--neutral-bg, #f0f2f5));
  border: 1px solid var(--border);
  border-radius: 12px;
}
html[data-theme="dark"] .author-bio {
  background: rgba(99, 210, 255, 0.04);
  border-color: rgba(99, 210, 255, 0.18);
}

.author-bio-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Identity row (avatar + name) ── */
.author-bio-identity {
  display: flex;
  align-items: center;
  gap: 18px;
}
.author-bio-avatar-img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: block;
  background: var(--neutral-bg);
  border: 2px solid var(--border);
}
html[data-theme="dark"] .author-bio-avatar-img {
  border-color: rgba(99, 210, 255, 0.3);
}

.author-bio-name-block {
  flex: 1;
  min-width: 0;
}
.author-bio-name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}
.author-bio-name a {
  color: var(--fg);
  text-decoration: none;
}
.author-bio-name a:hover,
.author-bio-name a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

/* ── Bio paragraph ── */
.author-bio-text {
  color: var(--fg);
  font-size: 1rem;
  line-height: 1.6;
}
.author-bio-text p {
  margin: 0 0 12px;
}
.author-bio-text p:last-child { margin-bottom: 0; }
.author-bio-text a {
  color: var(--accent);
  text-decoration: underline;
}
.author-bio-text a:hover,
.author-bio-text a:focus-visible {
  color: var(--accent-hover, #e66e00);
}

/* ── Mobile: stack identity row ── */
@media (max-width: 600px) {
  .author-bio { padding: 20px; }
  .author-bio-identity {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
  }
  .author-bio-avatar-img {
    width: 80px;
    height: 80px;
  }
}


/* ══════════════════════════════════════════════════════════════════
   3. CREDLY IFRAME — light/dark mode handling
   ──────────────────────────────────────────────────────────────────
   Credly's embed loads a fixed-size iframe with a hardcoded white
   background. The previous approach used `mix-blend-mode: lighten`,
   which is wrong in both directions:
     • Light mode: footer bg is white (var(--bg-card)) and the iframe
       is white, so the badge artwork is washed out against an all-
       white area.
     • Dark mode: `lighten` keeps the lighter pixel, so a white iframe
       stays white over navy — exactly the glare we wanted to avoid.

   Correct fix: drop `mix-blend-mode` everywhere and wrap the iframe
   container in a tinted card so the badge sits inside a defined area
   that contrasts with the surrounding page in BOTH modes. The badge
   artwork itself keeps its natural colours.
   ══════════════════════════════════════════════════════════════════ */

/* Soft card around any Credly badge wrapper — Credly's embed.js
   renders the iframe inside the element carrying data-share-badge-id.
   The card gives the white iframe a defined area in both light mode
   (where the footer bg is white, so without the card the badge has
   nothing to sit in) and dark mode (where it softens the contrast). */
[data-share-badge-id],
.credly-badge {
  background: var(--neutral-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
}

/* Credly iframe itself — natural appearance, no filter or blend
   mode. Earlier experiments with brightness filters and
   mix-blend-mode distorted the badge artwork. Just override the
   legacy `mix-blend-mode: lighten` from older patches. */
[data-share-badge-id] iframe,
.credly-badge iframe,
.sidebar iframe[src*="credly"],
.widget iframe[src*="credly"],
.site-footer iframe[src*="credly"] {
  background: transparent !important;
  color-scheme: light dark !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  display: block;
  margin: 0 auto;
}


/* ══════════════════════════════════════════════════════════════════
   FOOTER WIDGET AREAS — light polish
   ──────────────────────────────────────────────────────────────────
   The 3-column footer widget bar is already registered and rendered
   in footer.php. This block adds proper grid + typography styling.
   ══════════════════════════════════════════════════════════════════ */

.site-footer .footer-widgets {
  /* Flex instead of grid so widgets center regardless of how many
     sidebars (footer-1, footer-2, footer-3) have content. With grid's
     repeat(3, 1fr) the columns were always reserved, so two widgets
     ended up pinned to the left rather than centred. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(99, 210, 255, 0.15);
  text-align: center;
}
@media (max-width: 800px) {
  .site-footer .footer-widgets {
    gap: 24px;
  }
}

/* When a single footer column contains multiple widgets (e.g. both
   the bio card and the Credly badge dropped into Footer Column 1),
   lay them out side-by-side at matched widths so they balance as a
   pair. Drops back to single column on narrow screens. */
.site-footer .footer-widget-col {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 24px !important;
  min-width: 0;
}
.site-footer .footer-widget-col > .widget,
.site-footer .footer-widget-col > section.widget {
  width: 220px !important;
  flex: 0 0 220px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* The bio card widget sizes itself (220 × 290) — release the column
   width constraint so its own dimensions take effect, and strip the
   column's background so the card's own card-styling shows. */
.site-footer .footer-widget-col > .widget:has(.td-bio-card),
.site-footer .footer-widget-col > section.widget:has(.td-bio-card) {
  width: auto !important;
  flex: 0 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

@media (max-width: 640px) {
  .site-footer .footer-widget-col {
    flex-direction: column !important;
  }
  .site-footer .footer-widget-col > .widget,
  .site-footer .footer-widget-col > section.widget {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
}

/* Footer widget typography. */
.site-footer .footer-widget-col .widget {
  margin: 0;
}
.site-footer .footer-widget-col .widget-title,
.site-footer .footer-widget-col h2,
.site-footer .footer-widget-col h3 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg-muted);
  margin: 0 0 12px;
}
.site-footer .footer-widget-col p,
.site-footer .footer-widget-col li {
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.5;
}
.site-footer .footer-widget-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer .footer-widget-col li {
  padding: 4px 0;
}
.site-footer .footer-widget-col a {
  color: #63D2FF;
  text-decoration: underline;
}
.site-footer .footer-widget-col a:hover,
.site-footer .footer-widget-col a:focus-visible {
  color: var(--accent);
}


/* ══════════════════════════════════════════════════════════════════
   BIO CARD — gravatar + name + Follow on LinkedIn button
   ──────────────────────────────────────────────────────────────────
   Used in the footer alongside the Credly badge. The widget admin
   has the HTML; this styles it. Sized to match the Credly card's
   visual height (~290px) so the two cards balance side-by-side. The
   photo URL is a gravatar (your secure.gravatar.com hash) so it
   stays tied to your registered email instead of a stale upload.
   ══════════════════════════════════════════════════════════════════ */
.site-footer .td-bio-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 220px;
  height: 290px;
  padding: 16px 12px;
  background: var(--neutral-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-sizing: border-box;
}
.site-footer .td-bio-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex: 0 0 120px;
}
.site-footer .td-bio-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  /* a11y v1.2.8: use semantic token so contrast passes WCAG 2.1 AA in both
     light mode (#1a1a1a on #f0f2f5 = 16.0:1) and dark mode (#fff on #1a3050 = 12.6:1).
     Previously hard-coded #fff which only worked in dark mode. */
  color: var(--fg);
  text-align: center;
  line-height: 1.2;
}
.site-footer .td-bio-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  background: #0A66C2;          /* LinkedIn brand blue */
  color: #fff !important;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none !important;
  box-sizing: border-box;
}
.site-footer .td-bio-cta:hover {
  background: #084d92;
  text-decoration: none !important;
}
.site-footer .td-bio-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: #084d92;
}