/*
Theme Name: DentedPrinter
Theme URI: https://dentedprinter.com
Author: Dylan
Author URI: https://dentedprinter.com
Description: A Threads-inspired minimal blog for makers. Dark-mode first, mobile-ready, left-sidebar navigation on desktop.
Version: 1.1.57
Requires at least: 6.0
Tested up to: 6.7
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dentedprinter
*/

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Backgrounds */
  --dp-bg:         #fafafa;   /* zinc-50  — page background              */
  --dp-surface:    #ffffff;   /* white    — card / compose surface        */
  --dp-surface-2:  #f4f4f5;   /* zinc-100 — subtle surface (code, tables) */

  /* Borders */
  --dp-border:     #e4e4e7;   /* zinc-200 — primary borders               */
  --dp-border-2:   #d4d4d8;   /* zinc-300 — thread line, blockquote       */

  /* Text */
  --dp-text:       #18181b;   /* zinc-900 — headings, strong              */
  --dp-text-body:  #27272a;   /* zinc-800 — body copy                     */
  --dp-text-muted: #676767;   /* timestamps, notes; readable on surfaces */
  --dp-text-sub:   #676767;   /* placeholders and secondary text         */

  /* Accent — change --dp-accent here and every accent element updates   */
  --dp-accent:     #eae724;   /* ← your accent colour                     */
  --dp-accent-ink: #656300;   /* readable yellow-family text in light mode */
  --dp-focus:      #656300;
  --dp-sidebar-width: 0px;

  /* Functional */
  --dp-heart:      #f43f5e;   /* like / heart button                       */
}

.dark {
  --dp-bg:         #101010;   /* neutral off-black — no blue cast */
  --dp-surface:    #181818;   /* card / compose surfaces           */
  --dp-surface-2:  #272727;   /* code blocks, table headers        */
  --dp-border:     rgba(255,255,255,.08); /* primary borders        */
  --dp-border-2:   #3d3d3d;   /* thread line, blockquote           */
  --dp-text:       #fafafa;   /* headings, strong                  */
  --dp-text-body:  #dedede;   /* body copy                         */
  --dp-text-muted: #999999;   /* timestamps, notes                 */
  --dp-text-sub:   #999999;   /* readable secondary text           */
  --dp-accent:     #f5f37c;   /* lighter variant for dark mode     */
  --dp-accent-ink: #f5f37c;
  --dp-focus:      #f5f37c;
  /* --dp-heart is the same in both modes */
}


/* ═══════════════════════════════════════════════════════════
   GLOBAL
   ═══════════════════════════════════════════════════════════ */

/* Smooth theme transitions */
*, *::before, *::after {
  transition-property: background-color, border-color, color;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

/* Global focus ring — keyboard navigation only, never on mouse click */
:focus-visible {
  outline: 2px solid var(--dp-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Keep scrollbars available as position and overflow cues. */
html { scroll-padding-block: 4rem; }
@media (min-width: 768px) { :root { --dp-sidebar-width: 16rem; } }

.dp-skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--dp-surface);
  color: var(--dp-text);
  border: 2px solid var(--dp-focus);
  border-radius: 0.5rem;
  transform: translateY(-200%);
}
.dp-skip-link:focus { transform: translateY(0); }

/* Keep site navigation reachable while an editor's WordPress toolbar is shown. */
.admin-bar #wpadminbar { position: fixed; }
.admin-bar .dp-sidebar,
.admin-bar .dp-mobile-header { top: var(--wp-admin--admin-bar--height, 32px); }
.admin-bar .dp-sidebar { height: calc(100% - var(--wp-admin--admin-bar--height, 32px)); }
.admin-bar .dp-skip-link { top: calc(var(--wp-admin--admin-bar--height, 32px) + 0.75rem); }

/* Native modal supplies focus containment and makes the page behind it inert. */
#dp-settings-panel {
  margin: 0;
  padding: 0;
  max-width: 100%;
  max-height: 100%;
  color: inherit;
}
#dp-settings-panel:not([open]) { display: none; }
#dp-settings-panel::backdrop { background: rgb(0 0 0 / 35%); backdrop-filter: blur(4px); }

/* Form utilities must not cancel the shared keyboard focus indicator. */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--dp-focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s; scroll-behavior: auto; }
}


/* ═══════════════════════════════════════════════════════════
   NAV ICONS
   ═══════════════════════════════════════════════════════════ */

/* Custom icon set (assets/dp-icons/dp-icons.css). The nav accent backing is drawn
   by .dp-icon-nav::after in that stylesheet from --dp-accent, so no filter
   drop-shadow here (it would double the yellow). The custom Loserboards drawing
   is already inverted: no rotation. Legacy Font Awesome fallback icons keep
   their old flip so unmigrated menus still read correctly. */
i.fa-ranking-star {
  display: inline-block;
  transform: rotate(180deg);
}
.dp-nav-link .dp-icon { font-size: 20px; }
.dp-nav-link, aside, nav[aria-label="Mobile navigation"] { overflow: visible; }
.dark aside .dp-icon-nav,
.dark nav[aria-label="Mobile navigation"] .dp-icon-nav { color: #fff; }

/* Surfaces driven by tokens (replaces Tailwind zinc backgrounds). */
.dp-bg { background-color: var(--dp-bg); }
.dp-bg-glass { background-color: color-mix(in srgb, var(--dp-bg) 85%, transparent); }
.dp-feed-surface { background-color: var(--dp-surface); }
.dark .dark\:border-zinc-800 { border-color: var(--dp-border); }
.dark .dark\:divide-zinc-800 > :not([hidden]) ~ :not([hidden]) { border-color: var(--dp-border); }

/* Theme toggle icons: moon in light mode, sun in dark mode. */
.dp-theme-sun { display: none; }
.dark .dp-theme-sun { display: inline-block; }
.dark .dp-theme-moon { display: none; }

/* ═══════════════════════════════════════════════════════════
   ACCENT UTILITIES
   All accent-coloured elements use these classes so that
   changing --dp-accent in :root / .dark updates everything.
   ═══════════════════════════════════════════════════════════ */

/* Text coloured with the accent */
.dp-accent-text { color: var(--dp-accent-ink); }

/* Subtle tinted background (email icon bg, etc.) */
.dp-accent-subtle-bg {
  background: color-mix(in srgb, var(--dp-accent) 12%, transparent);
}

/* Avatar / initials circle — solid accent */
.dp-avatar-gradient { background: var(--dp-accent); color: #000; }

/* Search input focus ring */
#dp-search-form:focus-within {
  box-shadow: 0 0 0 2px var(--dp-focus);
}

/* Like / heart buttons — post and comment */
.dp-like-btn:hover,
.dp-comment-like-btn:hover { color: var(--dp-heart); }
.dp-heart-active            { color: var(--dp-heart); }


/* ═══════════════════════════════════════════════════════════
   COMPONENTS
   ═══════════════════════════════════════════════════════════ */

/* Thread connector line */
.dp-thread-line {
  width: 2px;
  flex-shrink: 0;
  border-radius: 999px;
  background-color: var(--dp-border-2);
}

/* Search term highlight */
.dp-highlight {
  background: transparent;
  font-weight: 700;
  color: var(--dp-accent-ink);
}

/* Loading spinner */
@keyframes dp-spin { to { transform: rotate(360deg); } }
.dp-spin { animation: dp-spin 0.7s linear infinite; display: inline-block; }

/* Like heart pop animation */
@keyframes dp-heart-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.dp-heart-pop { animation: dp-heart-pop 0.25s ease; }


/* ═══════════════════════════════════════════════════════════
   HAND-DRAWN TAG UNDERLINES
   ═══════════════════════════════════════════════════════════ */

.dp-tag-link {
  position: relative;
  text-decoration: none;
  padding-bottom: 3px;
}

.dp-tag-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 5px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* Pattern 1 — gentle two-peak wave */
.dp-tag-stroke-1::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6' preserveAspectRatio='none'%3E%3Cpath d='M1,4 C12,2 28,5 44,3 C52,2 56,4 59,3' stroke='%23eae724' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.dark .dp-tag-stroke-1::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6' preserveAspectRatio='none'%3E%3Cpath d='M1,4 C12,2 28,5 44,3 C52,2 56,4 59,3' stroke='%23f5f37c' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Pattern 2 — single smooth arc */
.dp-tag-stroke-2::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 7' preserveAspectRatio='none'%3E%3Cpath d='M1,5 Q30,2 59,4' stroke='%23eae724' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.dark .dp-tag-stroke-2::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 7' preserveAspectRatio='none'%3E%3Cpath d='M1,5 Q30,2 59,4' stroke='%23f5f37c' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Pattern 3 — forward dip then pen lifts at end */
.dp-tag-stroke-3::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 7' preserveAspectRatio='none'%3E%3Cpath d='M2,3 C10,6 30,6 50,4 C54,3 57,4 59,2' stroke='%23eae724' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.dark .dp-tag-stroke-3::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 7' preserveAspectRatio='none'%3E%3Cpath d='M2,3 C10,6 30,6 50,4 C54,3 57,4 59,2' stroke='%23f5f37c' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Pattern 4 — diagonal sweep with faint shadow stroke beneath */
.dp-tag-stroke-4::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 7' preserveAspectRatio='none'%3E%3Cpath d='M3,5.5 C15,5 30,6 45,4.5' stroke='%23eae724' stroke-width='1.2' fill='none' stroke-linecap='round' opacity='0.4'/%3E%3Cpath d='M1,4 C20,3 35,5 59,2' stroke='%23eae724' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.dark .dp-tag-stroke-4::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 7' preserveAspectRatio='none'%3E%3Cpath d='M3,5.5 C15,5 30,6 45,4.5' stroke='%23f5f37c' stroke-width='1.2' fill='none' stroke-linecap='round' opacity='0.4'/%3E%3Cpath d='M1,4 C20,3 35,5 59,2' stroke='%23f5f37c' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* ═══════════════════════════════════════════════════════════
   LIVE SEARCH DROPDOWN
   ═══════════════════════════════════════════════════════════ */

#dp-search-dropdown {
  background: var(--dp-surface);
}

.dp-sr-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--dp-text-body);
  text-decoration: none;
  border-bottom: 1px solid var(--dp-border);
  transition: background 0.1s ease;
}
.dp-sr-item:last-child { border-bottom: none; }
.dp-sr-item:hover,
.dp-sr-item.dp-sr-active {
  background: var(--dp-surface-2);
}

.dp-sr-icon {
  font-size: 13px;
  color: var(--dp-text-sub);
  flex-shrink: 0;
}

.dp-sr-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--dp-text-body);
}

.dp-sr-empty {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--dp-text-muted);
}

.dp-sr-badge {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--dp-surface-2);
  color: var(--dp-text-muted);
  border: 1px solid var(--dp-border);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}


/* ═══════════════════════════════════════════════════════════
   WORDPRESS COMMENT FORM OVERRIDES
   ═══════════════════════════════════════════════════════════ */

#respond { margin-top: 1.5rem; }

.comment-form label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--dp-text-muted);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  background: var(--dp-surface-2);
  border: 1px solid var(--dp-border);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 15px;
  outline: none;
  font-family: inherit;
  color: var(--dp-text-body);
}

.comment-form textarea { resize: vertical; min-height: 100px; }

#submit {
  margin-top: 12px;
  background: var(--dp-text);
  color: var(--dp-bg);
  border: none;
  border-radius: 12px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
#submit:hover { opacity: 0.8; }

.comment-notes,
.logged-in-as {
  font-size: 13px;
  color: var(--dp-text-muted);
  margin-bottom: 12px;
}


/* ═══════════════════════════════════════════════════════════
   POST CONTENT TYPOGRAPHY
   ═══════════════════════════════════════════════════════════ */

.dp-post-content {
  font-size: 15px;
  line-height: 1.75;
  color: var(--dp-text-body);
}

/* Headings — no !important needed; style.css loads after Tailwind's compiled
   CSS so specificity wins naturally. */
.dp-post-content h1,
.dp-post-content h2,
.dp-post-content h3,
.dp-post-content h4,
.dp-post-content h5,
.dp-post-content h6 {
  font-weight: 700;
  line-height: 1.3;
  margin-top: 2em;
  margin-bottom: 0.6em;
  color: var(--dp-text);
}
.dp-post-content h2 { font-size: 1.45rem; }
.dp-post-content h3 { font-size: 1.25rem; }
.dp-post-content h4 { font-size: 1.1rem;  }
.dp-post-content h5,
.dp-post-content h6 { font-size: 1rem;    }

/* First element needs no extra top margin */
.dp-post-content > *:first-child,
.dp-post-content > .wp-block-group > *:first-child { margin-top: 0; }

/* Paragraphs */
.dp-post-content p { margin-top: 0; margin-bottom: 1em; }
.dp-post-content p:last-child { margin-bottom: 0; }

/* Lists */
.dp-post-content ul,
.dp-post-content ol { padding-left: 1.5em; margin-bottom: 1em; }
.dp-post-content ul  { list-style-type: disc; }
.dp-post-content ol  { list-style-type: decimal; }
.dp-post-content li  { margin-bottom: 0.35em; }
.dp-post-content li > ul,
.dp-post-content li > ol { margin-bottom: 0; margin-top: 0.35em; }

/* Links */
.dp-post-content a {
  color: var(--dp-accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dp-post-content a:hover { opacity: 0.75; }

/* Blockquote */
.dp-post-content blockquote {
  border-left: 3px solid var(--dp-border-2);
  margin: 1.25em 0;
  padding: 0.25em 0 0.25em 1em;
  color: var(--dp-text-muted);
  font-style: italic;
}

/* Inline code */
.dp-post-content code {
  font-size: 0.875em;
  color: var(--dp-accent-ink);
  background: var(--dp-surface-2);
  padding: 0.15em 0.35em;
  border-radius: 0.3rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Code blocks */
.dp-post-content pre {
  background: var(--dp-surface-2);
  border: 1px solid var(--dp-border);
  border-radius: 0.75rem;
  padding: 1em 1.25em;
  overflow-x: auto;
  margin: 1em 0;
  font-size: 0.875rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.6;
}
.dp-post-content pre code { background: none; padding: 0; color: var(--dp-text-body); }

/* Images */
.dp-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  margin: 0.75em 0;
  border: 1px solid var(--dp-border);
}

/* Horizontal rule */
.dp-post-content hr {
  border: none;
  border-top: 1px solid var(--dp-border);
  margin: 2em 0;
}

/* Strong / em */
.dp-post-content strong { font-weight: 700; color: var(--dp-text); }
.dp-post-content em { font-style: italic; }

/* Tables */
.dp-post-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  margin: 1em 0;
}
.dp-post-content th,
.dp-post-content td {
  padding: 0.5em 0.75em;
  border: 1px solid var(--dp-border);
  text-align: left;
}
.dp-post-content th {
  font-weight: 600;
  background: var(--dp-surface-2);
  color: var(--dp-text);
}

/* Gutenberg block spacing */
.dp-post-content .wp-block-group,
.dp-post-content .wp-block-column { margin-bottom: 1em; }
.dp-post-content .wp-block-image  { margin: 0.75em 0; }
.dp-post-content .wp-block-image img { margin: 0; }


/* ═══════════════════════════════════════════════════════════
   THREAD SEGMENT BLOCK — FRONTEND
   Renders a Threads-style chain: avatar + line | text + carousel
   ═══════════════════════════════════════════════════════════ */

.dp-thread-segment {
  display: flex;
  gap: 12px;
  padding: 4px 0 0 10px;
  border-left: 3px solid var(--dp-accent);
}

/* ── Left column: avatar + thread line ── */
.dp-ts-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 40px;
}

.dp-ts-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Thread line connecting to the next segment */
.dp-ts-line {
  width: 2px;
  flex: 1;
  min-height: 20px;
  background: var(--dp-border-2);
  border-radius: 1px;
  margin-top: 6px;
}

/* Hide thread line on the last segment in a chain */
.dp-thread-segment:last-of-type .dp-ts-line,
.dp-thread-segment:last-child .dp-ts-line {
  display: none;
}

/* ── Right column: content ── */
.dp-ts-right {
  flex: 1;
  min-width: 0;
  padding-bottom: 20px;
}

.dp-ts-author {
  font-size: 15px;
  font-weight: 600;
  color: var(--dp-text);
  line-height: 1.3;
}

.dp-ts-text {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--dp-text-body);
}

/* Inline formatting within a segment */
.dp-ts-text strong { font-weight: 700; color: var(--dp-text); }
.dp-ts-text em     { font-style: italic; }
.dp-ts-text a      { color: var(--dp-accent-ink); text-decoration: underline; text-underline-offset: 2px; }

/* ── Carousel inside a segment ── */
.dp-ts-carousel {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 6px;
  margin-top: 10px;
  border-radius: 14px;
  cursor: grab;
  scrollbar-width: none;
}
/* Touch devices: let the browser handle snap + momentum natively */
@media (pointer: coarse) {
  .dp-ts-carousel { scroll-snap-type: x mandatory; }
}
.dp-ts-carousel:active                    { cursor: grabbing; }
.dp-ts-carousel::-webkit-scrollbar        { display: none; }

.dp-ts-carousel-item {
  flex: 0 0 calc(50% - 3px);
  scroll-snap-align: start;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
}

.dp-ts-carousel-item img,
.dp-ts-carousel-item video {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none; /* prevent OS-level image drag in WebKit/Blink */
  user-select: none;
}

/* Single image: full width */
.dp-ts-carousel .dp-ts-carousel-item:only-child {
  flex: 0 0 100%;
}

.dp-ts-carousel-wrap {
  position: relative;
}

/* ═══════════════════════════════════════════════════════════
   EMOJI PICKER
   ═══════════════════════════════════════════════════════════ */

#dp-emoji-panel {
  position: fixed;   /* escapes all overflow-hidden parent containers */
  z-index: 9999;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.18));
}

/* Override emoji-picker-element custom properties to match theme */
emoji-picker {
  --border-radius:    14px;
  --border-size:      1px;
  --background:       var(--dp-surface, #fff);
  --border-color:     var(--dp-border, #e5e7eb);
  --button-active-background: var(--dp-accent, #a78bfa);
  --button-hover-background: rgba(0,0,0,0.06);
  --input-border-radius: 8px;
  --input-font-size:  13px;
  --emoji-size:       1.4rem;
  --emoji-padding:    .3rem;
  --category-emoji-size: 1rem;
  --num-columns:      8;
  width:  320px;
  height: 340px;
}

emoji-picker.dark {
  --background:       var(--dp-surface-dark, #18181b);
  --border-color:     var(--dp-border-dark, #3f3f46);
  --button-hover-background: rgba(255,255,255,0.07);
}

/* ═══════════════════════════════════════════════════════════
   GIF PICKER
   ═══════════════════════════════════════════════════════════ */

#dp-gif-panel {
  position: fixed;
  z-index: 9999;
  width: 320px;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 420px;
}
[hidden]#dp-gif-panel { display: none; }

.dark #dp-gif-panel {
  background: #18181b;
  border-color: #3f3f46;
}

.dp-gif-search-wrap {
  padding: 10px 10px 8px;
  border-bottom: 1px solid #e4e4e7;
  flex-shrink: 0;
}
.dark .dp-gif-search-wrap { border-bottom-color: #3f3f46; }

.dp-gif-search-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  background: #f4f4f5;
  font-size: 13px;
  outline: none;
  color: #18181b;
  box-sizing: border-box;
}
.dark .dp-gif-search-input {
  background: #27272a;
  border-color: #3f3f46;
  color: #f4f4f5;
}
.dp-gif-search-input::placeholder { color: var(--dp-text-sub); }
.dp-gif-search-input:focus {
  border-color: var(--dp-accent, #a78bfa);
}

.dp-gif-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  overflow-y: auto;
  padding: 6px;
  flex: 1;
  min-height: 0;
}

.dp-gif-item {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  display: block;
  background: #f4f4f5;
  transition: opacity 0.12s;
}
.dark .dp-gif-item { background: #27272a; }
.dp-gif-item:hover { opacity: 0.82; }

.dp-gif-status {
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px;
  color: #71717a;
  font-size: 13px;
  margin: 0;
}

.dp-gif-attribution {
  display: block;
  text-align: center;
  padding: 5px;
  font-size: 11px;
  color: #a1a1aa;
  text-decoration: none;
  border-top: 1px solid #e4e4e7;
  flex-shrink: 0;
}
.dark .dp-gif-attribution { border-top-color: #3f3f46; }
.dp-gif-attribution:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   COMMENT MODERATION DROPDOWN
   ═══════════════════════════════════════════════════════════ */

.dp-comment-dropdown {
  position: fixed;  /* JS positions via getBoundingClientRect; escapes overflow:hidden */
  min-width: 168px;
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  z-index: 9999;
  overflow: hidden;
  padding: 4px 0;
}
[hidden].dp-comment-dropdown { display: none; }

.dp-mod-action {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--dp-text);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}
.dp-mod-action:hover {
  background: var(--dp-surface-2);
}
.dp-mod-action--danger { color: #ef4444; }
.dp-mod-action--danger:hover { background: rgba(239, 68, 68, 0.08); }

.dp-dropdown-divider {
  height: 1px;
  background: var(--dp-border);
  margin: 4px 0;
}


/* Consecutive segments: no extra top margin */
.dp-thread-segment + .dp-thread-segment {
  margin-top: 0;
}


/* ═══════════════════════════════════════════════════════════
   COMMENT MEDIA
   Covers:
     - Synced Threads reply images/video thumbnails
     - WP user-uploaded carousel images
   Same snap-scroll carousel classes as Thread Segment.
   ═══════════════════════════════════════════════════════════ */

.dp-comment-media {
  max-width: 320px; /* keep images contained within the comment column */
}

/* Single Threads-synced image */
.dp-comment-media-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* Single WP-uploaded image (when count === 1) */
.dp-comment-media-single .dp-ts-carousel-item {
  flex: 0 0 100%;
}
.dp-comment-media-single .dp-ts-carousel-item img {
  border-radius: 12px;
}

/* "View carousel on Threads" note under CAROUSEL_ALBUM previews */
.dp-comment-media-more {
  display: block;
  font-size: 11px;
  color: var(--dp-text-muted);
  margin-top: 4px;
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════
   THREADS-STYLE IMAGE CAROUSEL
   Targets the native Gutenberg Gallery block wherever it's
   placed in post content. Two images visible, snap-scroll.
   ═══════════════════════════════════════════════════════════ */

.dp-post-content .wp-block-gallery {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 6px;
  padding: 2px 0 4px;
  margin: 1em 0;
  scrollbar-width: none;      /* Firefox */
  cursor: grab;
  /* Override WP's default grid layout */
  grid-template-columns: unset !important;
}
.dp-post-content .wp-block-gallery:active  { cursor: grabbing; }
.dp-post-content .wp-block-gallery::-webkit-scrollbar { display: none; }

/* ── Nested image format (WP 5.9+) ── */
.dp-post-content .wp-block-gallery > .wp-block-image {
  flex: 0 0 calc(50% - 3px) !important;
  max-width: none !important;
  width:     auto !important;
  scroll-snap-align: start;
  border-radius: 14px;
  overflow: hidden;
  margin: 0 !important;
}
.dp-post-content .wp-block-gallery > .wp-block-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  margin: 0;
  border-radius: 0;
}
/* Show captions below each image in the carousel */
.dp-post-content .wp-block-gallery > .wp-block-image figcaption {
  font-size: 11px;
  text-align: center;
  padding: 4px 6px;
  color: var(--dp-text-muted);
  background: transparent;
}

/* ── Legacy list format (pre-5.9) ── */
.dp-post-content .wp-block-gallery.blocks-gallery-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
}
.dp-post-content .wp-block-gallery .blocks-gallery-item {
  flex: 0 0 calc(50% - 3px) !important;
  max-width: none !important;
  width: auto !important;
  scroll-snap-align: start;
  border-radius: 14px;
  overflow: hidden;
  margin: 0 !important;
}
.dp-post-content .wp-block-gallery .blocks-gallery-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.dp-post-content .wp-block-gallery .blocks-gallery-item figcaption {
  font-size: 11px;
  text-align: center;
  padding: 4px 6px;
  color: var(--dp-text-muted);
}

/* ── Custom scrollbar indicator (injected by JS, always visible) ── */
.dp-carousel-scrollbar {
  position: relative;
  height: 3px;
  background: var(--dp-border-2, #e5e7eb);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.dp-carousel-scrollbar-thumb {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--dp-border-2, #d1d5db);
  border-radius: 2px;
  transition: left 0.08s linear, background 0.25s ease;
}
.dp-ts-carousel-wrap:hover .dp-carousel-scrollbar-thumb {
  background: var(--dp-accent, #a78bfa);
}


/* ═══════════════════════════════════════════════════════════
   GLIGHTBOX — DARK / LIGHT MODE OVERRIDES
   GLightbox loads its own CSS; these rules run after it
   (style.css is enqueued after glightbox).
   ═══════════════════════════════════════════════════════════ */

/* Light mode caption area */
.glightbox-clean .gslide-description {
  background: #fafafa;   /* zinc-50 */
}
.glightbox-clean .gslide-title {
  color: #18181b;        /* zinc-900 */
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
}
.glightbox-clean .gslide-desc {
  color: #52525b;        /* zinc-600 */
  font-family: inherit;
  font-size: 13px;
}

/* Light mode nav / close buttons */
.glightbox-clean .gnext,
.glightbox-clean .gprev {
  background: rgba(255,255,255,0.85);
  border: 1px solid #e4e4e7;
}
.glightbox-clean .gclose {
  background: rgba(255,255,255,0.85);
}

/* Dark mode overrides */
html.dark .glightbox-clean .gslide-description {
  background: #09090b;   /* zinc-950 */
}
html.dark .glightbox-clean .gslide-title {
  color: #f4f4f5;        /* zinc-100 */
}
html.dark .glightbox-clean .gslide-desc {
  color: #a1a1aa;        /* zinc-400 */
}
html.dark .glightbox-clean .gnext,
html.dark .glightbox-clean .gprev {
  background: rgba(39,39,42,0.85);  /* zinc-800 */
  border-color: #3f3f46;
}
html.dark .glightbox-clean .gclose {
  background: rgba(39,39,42,0.85);
}
html.dark .glightbox-clean .gnext svg path,
html.dark .glightbox-clean .gprev svg path,
html.dark .glightbox-clean .gclose svg path {
  fill: #f4f4f5;
}

/* ═══════════════════════════════════════════════════════════
   TOOLS PAGE — core blocks inside the directory
   ═══════════════════════════════════════════════════════════
   The Tools page is built from blocks (see blocks/tool-card/ and
   blocks/tool-list/), so its intro copy and section headings are plain
   core/paragraph and core/heading blocks. Those can't carry Tailwind classes
   without the editor typing them by hand, so the look is pinned here instead.
   Values match what the old hardcoded template used: 28px/black title,
   14px muted intro, 13px uppercase section headings. */

.dp-tools-content > p {
  font-size: 14px;
  line-height: 1.625;
  color: var(--dp-text-muted);
  margin: 8px 0 24px;
}

.dp-tools-content > h2 {
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--dp-text);
  margin: 40px 0 0;
}

/* A heading's own intro paragraph sits tighter to it than the page intro does. */
.dp-tools-content > h2 + p {
  margin: 8px 0 16px;
}

/* Two card lists in a row (no heading between) still need the gap. */
.dp-tools-content > div + div {
  margin-top: 12px;
}

/* ─── Hard guard: `hidden` must always beat a display utility ───────────────
   Tailwind's preflight `[hidden]{display:none}` sits in the base layer, so any
   `display` utility in the utility layer (`.flex`, `.grid`, `.block`) silently
   outranks it — equal specificity, later in the file. That is what made the
   guest-delete confirm modal render unprompted on every post page. The markup
   and theme.js no longer rely on that cascade, but this keeps the whole class
   of bug from coming back if someone re-adds a display class to the markup. */
#dp-guest-delete-modal[hidden] {
  display: none !important;
}

/* Accounts release 2026-10-25 */
/* Accounts and public profiles reuse the site's surfaces, yellow accents and
   rounded tool-card rhythm. No separate fixed page bar or hard-coded theme. */
.dp-account-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem 1rem 1rem;
  color: var(--dp-text);
}
.dp-account-page-header h1 { font-size: 1.75rem; font-weight: 800; line-height: 1.2; letter-spacing: -.025em; }
.dp-account-page-header form { margin: 0; }
.dp-account-eyebrow { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; color: var(--dp-accent-ink); }
.dp-account-eyebrow .dp-icon { font-size: 1.125rem; }
.dp-account-language { font-size: .8125rem; white-space: nowrap; }
.dp-account-link, .dp-account-content a { color: var(--dp-accent-ink); text-decoration: underline; text-underline-offset: .2em; }
.dp-account-link:hover, .dp-account-content a:hover { text-decoration-thickness: 2px; }
.dp-account-content a.dp-account-link--drawn,
.dp-account-link.dp-account-link--drawn { text-decoration: none; align-self: flex-start; }
.dp-account-content { padding: .5rem 1rem 2.5rem; color: var(--dp-text-body); }
.dp-account-content > section, .dp-public-profile-card {
  padding: 1.5rem;
  border: 1px solid var(--dp-border);
  border-radius: 1.5rem;
  background: var(--dp-surface);
}
.dp-account-content > section h2 { color: var(--dp-text); }
.dp-account-content p { overflow-wrap: anywhere; }
.dp-account-field-label { display: flex; flex-direction: column; gap: .375rem; font-size: .8125rem; color: var(--dp-text-muted); }
.dp-account-field, .dp-account-content textarea {
  display: block; width: 100%; min-height: 2.75rem;
  border: 1px solid var(--dp-border-2); border-radius: .75rem;
  padding: .625rem .875rem;
  background: var(--dp-bg); color: var(--dp-text-body); font-size: .875rem;
}
.dp-account-content textarea { min-height: 7rem; resize: vertical; }
.dp-account-content textarea[hidden] { display: none; }
.dp-account-field:focus-visible, .dp-account-content textarea:focus-visible { border-color: var(--dp-focus); }
.dp-account-content input[type="checkbox"] { accent-color: var(--dp-accent); width: 1rem; height: 1rem; vertical-align: -.15em; margin-inline-end: .375rem; flex-shrink: 0; }
.dp-account-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.75rem; padding: .625rem 1.125rem;
  border: 1px solid var(--dp-border-2); border-radius: 999px;
  font-size: .875rem; font-weight: 600; line-height: 1.25;
  background: transparent; color: var(--dp-text);
}
.dp-account-button--primary { background: var(--dp-accent); border-color: var(--dp-accent); color: #18181b; }
.dp-account-button--primary:hover { filter: brightness(.96); }
.dp-account-button--secondary:hover { background: var(--dp-surface-2); }
.dp-account-button--danger { color: #b91c1c; border-color: currentColor; }
.dark .dp-account-button--danger { color: #ff8e8e; }
.dp-public-profile-content { padding: .5rem 1rem 2.5rem; }
.dp-public-profile-card { display: flex; flex-direction: column; gap: 1.25rem; }
.dp-public-profile-identity { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.dp-public-profile-identity > div { min-width: 0; }
.dp-public-profile-identity h1 { color: var(--dp-text); font-size: 1.375rem; line-height: 1.25; font-weight: 750; overflow-wrap: anywhere; }
.dp-public-profile-initial { display: flex; align-items: center; justify-content: center; width: 3.75rem; height: 3.75rem; flex-shrink: 0; border-radius: 50%; font-size: 1.5rem; font-weight: 700; }
.dp-public-profile-handle { margin-top: .25rem; color: var(--dp-text-muted); font-size: .875rem; overflow-wrap: anywhere; }
.dp-public-profile-bio { color: var(--dp-text-body); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; font-size: .9375rem; }
.dp-account-note { color: var(--dp-text-muted); font-size: .8125rem; line-height: 1.6; }
.dp-public-profile-report { align-self: flex-start; font-size: .8125rem; }
.dp-bio-rich-editor { min-height: 7rem; padding: .75rem .875rem; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--dp-border-2); border-radius: .75rem; background: var(--dp-bg); color: var(--dp-text-body); }
.dp-bio-rich-editor[aria-invalid="true"] { border-color: #b91c1c; }
.dp-bio-preview { margin-top: 1rem; padding: .875rem; border: 1px dashed var(--dp-border-2); border-radius: .75rem; background: var(--dp-bg); }
.dp-bio-preview h3 { margin: 0 0 .5rem; font-size: .75rem; font-weight: 700; color: var(--dp-text-muted); }
.dp-bio-preview-content { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--dp-text-body); }
.dp-bio-preview-empty { color: var(--dp-text-muted); font-style: italic; }
.dp-settings-account-initial { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--dp-accent); color: #171717; font-weight: 700; }
.dp-settings-account-action { display: flex; align-items: center; gap: .625rem; padding: .625rem .75rem; border-radius: .75rem; font-size: .875rem; color: var(--dp-text-body); }
.dp-settings-account-action:hover { background: var(--dp-surface-2); }
.dp-settings-account-action--primary { background: var(--dp-accent); color: #171717; font-weight: 600; }
.dp-settings-account-action--primary:hover { background: var(--dp-accent-hover, var(--dp-accent)); }
.dp-settings-account-note { margin: 0 0 .75rem; font-size: .8125rem; line-height: 1.6; color: var(--dp-text-muted); }
.dp-bio-editor-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.dp-bio-editor-toolbar[hidden] { display: none; }
.dp-bio-editor-toolbar [hidden], .dp-sticker-dialog [hidden] { display: none; }
.dp-bio-editor-count { font-size: .75rem; color: var(--dp-text-muted); }
.dp-bio-sticker-chip { display: inline-block; vertical-align: middle; margin: 0 .15em; }
.dp-inline-sticker { display: inline-block; vertical-align: middle; width: 1.7em; height: 1.7em; object-fit: contain; }
.dark .dp-inline-sticker[src$=".svg"], .dark .dp-sticker-option img[src$=".svg"] { filter: invert(1); }
.dp-sticker-dialog { width: min(34rem, calc(100vw - 2rem)); max-height: min(80vh, 45rem); margin: auto; padding: 1.25rem; border: 1px solid var(--dp-border-2); border-radius: 1.5rem; background: var(--dp-surface); color: var(--dp-text); overflow: auto; }
.dp-sticker-dialog::backdrop { background: rgb(0 0 0 / 45%); }
.dp-sticker-dialog h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: .75rem; }
.dp-sticker-tabs, .dp-sticker-search { display: flex; gap: .5rem; margin: 1rem 0; }
.dp-sticker-tabs [aria-pressed="true"] { background: var(--dp-accent); border-color: var(--dp-accent); color: #18181b; }
.dp-sticker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 1rem 0; }
.dp-sticker-option { display: flex; flex-direction: column; gap: .5rem; align-items: center; justify-content: center; min-height: 5rem; padding: .625rem; border-radius: .75rem; border: 1px solid var(--dp-border); font-size: .75rem; overflow-wrap: anywhere; }
.dp-sticker-option:hover { border-color: var(--dp-focus); }
.dp-sticker-option img { width: 3rem; height: 3rem; object-fit: contain; }
.dp-sticker-grid > div > .dp-sticker-option { width: 100%; }
.dp-sticker-creator { display: block; font-size: .7rem; overflow-wrap: anywhere; margin-top: .25rem; }
.dp-inline-giphy-placeholder { display: inline-block; }
.dp-inline-giphy-placeholder a { font-size: .65rem; }
@media (max-width: 479px) {
  .dp-account-content > section, .dp-public-profile-card { padding: 1.125rem; }
  .dp-public-profile-identity { gap: .75rem; }
  .dp-public-profile-initial { width: 3rem; height: 3rem; font-size: 1.25rem; }
}