/*
 * WordPress Customizer → Additional CSS
 * for cosminpop.uk theme
 *
 * This file is a reference copy of the CSS that should be
 * pasted into: Appearance → Customise → Additional CSS
 *
 * These rules supplement the theme's style.css with overrides
 * that need higher specificity to beat third-party plugin CSS
 * (SyntaxHighlighter, Jetpack sharing/likes, etc.)
 *
 * Last updated: 2026-02-15 (theme v1.4.0)
 */


/* ============================================
   SYNTAXHIGHLIGHTER DARK THEME OVERRIDE
   Double-class selectors (.x.x) beat the SH
   theme stylesheet which loads after ours.
   Using background-color (not shorthand) to
   match the property the plugin sets.
   ============================================ */
.syntaxhighlighter.syntaxhighlighter {
  background-color: var(--cp-bg-code) !important;
  border: 1px solid var(--cp-border) !important;
  border-radius: var(--cp-radius-md) !important;
  padding: var(--cp-space-sm) 0 !important;
  overflow: auto !important;
  font-family: var(--cp-font-mono) !important;
  font-size: 0.85rem !important;
  line-height: 1.6 !important;
  margin: var(--cp-space-lg) 0 !important;
}

.syntaxhighlighter.syntaxhighlighter table {
  border: none !important;
  border-collapse: collapse !important;
  background-color: transparent !important;
}

.syntaxhighlighter.syntaxhighlighter table td {
  border: none !important;
  background-color: transparent !important;
  padding: 0 !important;
  vertical-align: top !important;
}

/* Line number gutter */
.syntaxhighlighter.syntaxhighlighter .gutter {
  background-color: transparent !important;
  border-right: 1px solid var(--cp-border) !important;
  padding-right: var(--cp-space-sm) !important;
  min-width: 2.5em !important;
  text-align: right !important;
  user-select: none !important;
}

.syntaxhighlighter.syntaxhighlighter .gutter .line {
  background-color: transparent !important;
  color: var(--cp-text-muted) !important;
  border-right: none !important;
  padding: 0 var(--cp-space-sm) !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Code area */
.syntaxhighlighter.syntaxhighlighter .code {
  background-color: transparent !important;
  padding-left: var(--cp-space-md) !important;
}

.syntaxhighlighter.syntaxhighlighter .code .line {
  background-color: transparent !important;
  padding: 0 var(--cp-space-sm) !important;
  white-space: pre !important;
}

/* Alternating line backgrounds */
.syntaxhighlighter.syntaxhighlighter .line.alt1 {
  background-color: transparent !important;
}

.syntaxhighlighter.syntaxhighlighter .line.alt2 {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Highlighted lines */
.syntaxhighlighter.syntaxhighlighter .line.highlighted.alt1,
.syntaxhighlighter.syntaxhighlighter .line.highlighted.alt2 {
  background-color: rgba(56, 189, 248, 0.08) !important;
}

/* Toolbar */
.syntaxhighlighter.syntaxhighlighter .toolbar {
  background-color: transparent !important;
  border: none !important;
  color: var(--cp-text-muted) !important;
}

.syntaxhighlighter.syntaxhighlighter .toolbar a {
  color: var(--cp-text-muted) !important;
}

/* --- Syntax colors (Catppuccin Mocha inspired) --- */
.syntaxhighlighter.syntaxhighlighter .plain,
.syntaxhighlighter.syntaxhighlighter .plain a {
  color: var(--cp-code-text) !important;
}

.syntaxhighlighter.syntaxhighlighter .comments,
.syntaxhighlighter.syntaxhighlighter .comments a {
  color: #6c7086 !important;
  font-style: italic !important;
}

.syntaxhighlighter.syntaxhighlighter .keyword {
  color: #cba6f7 !important;
  font-weight: 600 !important;
}

.syntaxhighlighter.syntaxhighlighter .string,
.syntaxhighlighter.syntaxhighlighter .string a {
  color: #a6e3a1 !important;
}

.syntaxhighlighter.syntaxhighlighter .variable {
  color: #f38ba8 !important;
}

.syntaxhighlighter.syntaxhighlighter .functions {
  color: #89b4fa !important;
}

.syntaxhighlighter.syntaxhighlighter .constants {
  color: #fab387 !important;
}

.syntaxhighlighter.syntaxhighlighter .preprocessor {
  color: #f9e2af !important;
}

.syntaxhighlighter.syntaxhighlighter .color1,
.syntaxhighlighter.syntaxhighlighter .color1 a {
  color: #89dceb !important;
}

.syntaxhighlighter.syntaxhighlighter .color2,
.syntaxhighlighter.syntaxhighlighter .color2 a {
  color: #f5c2e7 !important;
}

.syntaxhighlighter.syntaxhighlighter .color3,
.syntaxhighlighter.syntaxhighlighter .color3 a {
  color: #94e2d5 !important;
}

.syntaxhighlighter.syntaxhighlighter .bold {
  font-weight: 700 !important;
}


/* ============================================
   COMMENT SECTION
   ============================================ */
.comment-respond {
  background: var(--cp-bg-card);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-lg);
  padding: var(--cp-space-xl);
  margin-top: var(--cp-space-2xl);
  max-width: var(--cp-content-width);
  margin-left: auto;
  margin-right: auto;
}

.comment-reply-title {
  font-family: var(--cp-font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cp-text-primary);
  margin-bottom: var(--cp-space-md);
  padding-bottom: var(--cp-space-sm);
  border-bottom: 1px solid var(--cp-border-subtle);
}

/* Force Jetpack iframe dark in dark mode */
[data-theme="dark"] #jetpack_remote_comment {
  filter: invert(0.88) hue-rotate(180deg);
  border-radius: var(--cp-radius-md);
  overflow: hidden;
}


/* ============================================
   ABOUT PAGE AVATAR (WP Block Image)
   ============================================ */
.is-style-circle-mask {
  max-width: 200px !important;
  height: 200px !important;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: visible !important;
  border-radius: 50%;
}

.is-style-circle-mask img {
  border-radius: 50% !important;
  width: 200px !important;
  height: 200px !important;
  object-fit: cover;
  position: relative;
  z-index: 2;
  margin: 0 !important;
}

.is-style-circle-mask::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 208px;
  height: 208px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--cp-accent), #7DD3FC, #a78bfa, #f477b6, var(--cp-accent));
  animation: spin 4s linear infinite;
  z-index: 0;
}

.is-style-circle-mask::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: 204px;
  height: 204px;
  border-radius: 50%;
  background: var(--cp-bg-primary);
  z-index: 1;
}

/* Align avatar to top of grid column */
.wp-block-jetpack-layout-grid-column:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--cp-space-lg);
}

/* Hide orphaned empty heading used as visual HR in About page */
.wp-block-jetpack-layout-grid-column .wp-block-heading:empty {
  display: none !important;
}


/* ============================================
   SHARE & LIKE WIDGETS
   ============================================ */
.sharedaddy {
  background: var(--cp-bg-card);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-lg);
  padding: var(--cp-space-lg) var(--cp-space-xl);
  margin-top: var(--cp-space-xl);
  text-align: center;
}

.page .article-content > .sharedaddy,
.single .article-content > .sharedaddy {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* Section headings ("Share this:", "Like this:") */
.sd-title {
  font-family: var(--cp-font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--cp-text-muted) !important;
  border-bottom: none !important;
  margin-bottom: var(--cp-space-md) !important;
}

/* Share buttons container — center them */
.sd-content {
  text-align: center !important;
}

.sd-content ul {
  display: inline-flex !important;
  gap: 8px !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Dark theme share buttons — high specificity to beat Jetpack's
   .sd-social-text .sd-content ul li a.sd-button (0,3,3) */
[data-theme="dark"] .sd-sharing .sd-content ul li a.sd-button {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--cp-text-secondary) !important;
  border: 1px solid var(--cp-border) !important;
  border-radius: var(--cp-radius-sm) !important;
  transition: all 0.2s ease !important;
}

[data-theme="dark"] .sd-sharing .sd-content ul li a.sd-button:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: var(--cp-accent) !important;
  border-color: var(--cp-accent) !important;
}

/* Share button icons — invert for dark mode */
[data-theme="dark"] .sd-sharing .sd-content ul li a.sd-button .share-icon {
  filter: invert(0.85);
}

/* Hide "Customise buttons" admin link */
.share-customize-link {
  display: none !important;
}

/* Like widget — center the iframe content */
.sharedaddy.sd-like {
  text-align: center;
}

/* Invert the Like iframe in dark mode */
[data-theme="dark"] .jetpack-likes-widget {
  filter: invert(0.88) hue-rotate(180deg);
  border-radius: var(--cp-radius-sm);
}

/* Remove duplicate borders when share + like are siblings */
.sharedaddy + .sharedaddy {
  margin-top: var(--cp-space-md);
}