/**
 * Dynamic Palette Styles
 * 
 * Uses CSS custom properties (--lp-* for light, --dp-* for dark) defined inline
 * in the HTML <head> by PHP. This file is static and cacheable — only the
 * CSS variable values change per-site (set in wrapper.html inline style).
 * 
 * SEO/Performance: This file replaces ~350 lines of inline <style> that were
 * render-blocking. Now it's cacheable by the browser across page navigations.
 */

/* ===== LIGHT PALETTE ===== */

html .content-article a:not(.no-style) {
   -webkit-text-decoration-color: var(--lp-color-blue);
   text-decoration-color: var(--lp-color-blue);
}

html .item-share:last-child button:focus .share-icon g,
html .item-share:last-child a:focus .share-icon g {
   stroke: var(--lp-color-black);
}

html .share-icon.copied {
   color: var(--lp-color-white);
   background-color: var(--lp-bg-blue) !important;
}

/* Background color */
html .item-share:not(:last-child) a:focus .share-icon,
html .item-share:not(:last-child) button:focus .share-icon,
html .simditor .simditor-wrapper,
html .simditor .simditor-toolbar,
html .button-access:disabled,
html .background-wwhite,
html .background-white {
   background-color: var(--lp-bg-white);
}

html .item-wspinner::before,
html .item-wspinner::after,
html .background-blue {
   background-color: var(--lp-bg-blue);
}
html .content-row-table:nth-child(odd),
html .button-social:hover,
html .background-grely {
   background-color: var(--lp-bg-grely);
}
html .background-redly {
   background-color: var(--lp-bg-redly);
}
html .background-red {
   background-color: var(--lp-bg-red);
}
html .staylogged-checkbox:checked,
html .accept-checkbox:checked,
html .background-black {
   background-color: var(--lp-bg-black);
}
html .btn_bvideo:active,
html .btn_bvideo:focus,
html .background-blackly {
   background-color: var(--lp-bg-blackly);
}
html .background-green {
   background-color: var(--lp-bg-green);
}

/* Text color */
html .color-blackly {
   color: var(--lp-color-blackly);
}
html .btn-dfilter.selected,
html .color-black {
   color: var(--lp-color-black);
}
html .color-wwhite,
html .color-white {
   color: var(--lp-color-white);
}
html .button-access:disabled span,
html .color-grey {
   color: var(--lp-color-grey);
}
html .content-article a:not(.no-style),
html .content-article a:not(.no-style):visited,
html .item-input:focus ~ .item-label,
html .tag-label.focus,
html .content-page a,
html .btn-ddown:focus span,
html .btn-ddown:active span,
html .btn-ddown:focus svg,
html .btn-ddown:active svg,
html .btn-dfilter:not(.selected):focus svg,
html .btn-dfilter:not(.selected):active svg,
html .btn-dfilter:not(.selected):focus span,
html .btn-dfilter:not(.selected):active span,
html .item_input:focus ~ .item-label,
html .color-blue {
   color: var(--lp-color-blue);
}
html .color-red {
   color: var(--lp-color-red);
}
html .color-green {
   color: var(--lp-color-green);
}
html .color-orange {
   color: var(--lp-color-orange);
}

/* Border color */
html .item-placeholder.active,
html .btn_popup:focus ~ .item-placeholder,
html .item-file:focus ~ .item-placeholder,
html .content-carrusel .item-pbcarousel.selected,
html .tag-label.focus ~ .content-tags,
html .btn-ddown:focus,
html .btn-ddown:active,
html .border-blue {
   border-color: var(--lp-border-blue) !important;
}
html .border-focus-blue:not(.border-red):focus {
   border-color: var(--lp-border-focus-blue) !important;
}
html .item-share:not(:last-child) a:focus .share-icon,
html .item-share:not(:last-child) button:focus .share-icon,
html .border-grely {
   border-color: var(--lp-border-grely) !important;
}
html .border-grey {
   border-color: var(--lp-border-grey) !important;
}
html .border-black {
   border-color: var(--lp-border-black) !important;
}
html .border-red {
   border-color: var(--lp-border-red) !important;
}

/* Hover and focus */
html .hover-blue.active:not([disabled]),
html .hover-blue:not([disabled]):active,
html .hover-blue:not([disabled]):focus {
   color: var(--lp-hover-blue);
}
html .hover-background:not([disabled]).active,
html .hover-background:not([disabled]):active,
html .hover-background:not([disabled]):focus {
   background-color: var(--lp-hover-background);
}
@media(pointer: fine){
   html .item-share:not(:last-child) .share-icon:hover {
      background-color: var(--lp-bg-white);
      border: 1px solid var(--lp-border-grely);
   }
   
   html .item-share:last-child button:hover .share-icon g,
   html .item-share:last-child a:hover .share-icon g {
      stroke: var(--lp-bg-black);
      opacity: 0.4;
   }

   html .btn_bvideo:hover {
      background-color: var(--lp-bg-blackly);
   }
   
   html .btn-ddown:hover,
   html .btn_popup:not([disabled]):hover ~ .item-placeholder,
   html .item-file:not([disabled]):hover ~ .item-placeholder {
      border-color: var(--lp-border-blue) !important;
   }

   html .btn-ddown:hover span,
   html .btn-ddown:hover svg,
   html .btn-dfilter:not(.selected):hover svg,
   html .btn-dfilter:not(.selected):hover span,
   html .hover-blue:not([disabled]):hover {
      color: var(--lp-hover-blue);
   }
   html .hover-background:not([disabled]):hover {
      background-color: var(--lp-hover-background);
   }
}

/* ===== DARK PALETTE ===== */

html[dark=true] .content-article a:not(.no-style) {
   -webkit-text-decoration-color: var(--dp-color-blue);
   text-decoration-color: var(--dp-color-blue);
}
html[dark=true] .item-share:last-child button:focus .share-icon g,
html[dark=true] .item-share:last-child a:focus .share-icon g {
   stroke: var(--dp-color-black);
}

html[dark=true] .share-icon.copied {
   color: var(--dp-color-black);
   background-color: var(--dp-bg-blue) !important;
}

/* Background color */
html[dark=true] .item-share:not(:last-child) a:focus .share-icon,
html[dark=true] .item-share:not(:last-child) button:focus .share-icon,
html[dark=true] .simditor .simditor-wrapper,
html[dark=true] .simditor .simditor-toolbar,
html[dark=true] .button-access:disabled,
html[dark=true] .background-white {
   background-color: var(--dp-bg-white);
}
html[dark=true] .item-wspinner::after,
html[dark=true] .item-wspinner::before,
html[dark=true] .background-blue {
   background-color: var(--dp-bg-blue);
}
html[dark=true] .content-row-table:nth-child(odd),
html[dark=true] .button-social:hover,
html[dark=true] .background-grely {
   background-color: var(--dp-bg-grely);
}
html[dark=true] .staylogged-checkbox:checked,
html[dark=true] .accept-checkbox:checked,
html[dark=true] .background-wwhite,
html[dark=true] .background-black {
   background-color: var(--dp-bg-black);
}

/* Text color */
html[dark=true] .color-blackly {
   color: var(--dp-color-blackly);
}
html[dark=true] .color-wwhite,
html[dark=true] .btn-dfilter.selected,
html[dark=true] .color-black {
   color: var(--dp-color-black);
}
html[dark=true] .color-white {
   color: var(--dp-color-white);
}
html[dark=true] .button-access:disabled span,
html[dark=true] .color-grey {
   color: var(--dp-color-grey);
}
html[dark=true] .content-article a:not(.no-style),
html[dark=true] .content-article a:not(.no-style):visited,
html[dark=true] .item-input:focus ~ .item-label,
html[dark=true] .tag-label.focus,
html[dark=true] .content-page a,
html[dark=true] .btn-ddown:focus span,
html[dark=true] .btn-ddown:active span,
html[dark=true] .btn-ddown:focus svg,
html[dark=true] .btn-ddown:active svg,
html[dark=true] .btn-dfilter:not(.selected):focus svg,
html[dark=true] .btn-dfilter:not(.selected):active svg,
html[dark=true] .btn-dfilter:not(.selected):focus span,
html[dark=true] .btn-dfilter:not(.selected):active span,
html[dark=true] .item_input:focus ~ .item-label,
html[dark=true] .color-blue {
   color: var(--dp-color-blue);
}

/* Border color */
html[dark=true] .item-placeholder.active,
html[dark=true] .btn_popup:focus ~ .item-placeholder,
html[dark=true] .item-file:focus ~ .item-placeholder,
html[dark=true] .content-carrusel .item-pbcarousel.selected,
html[dark=true] .tag-label.focus ~ .content-tags,
html[dark=true] .btn-ddown:focus,
html[dark=true] .btn-ddown:active,
html[dark=true] .border-blue {
   border-color: var(--dp-border-blue) !important;
}
html[dark=true] .border-focus-blue:not(.border-red):focus {
   border-color: var(--dp-border-focus-blue) !important;
}
html[dark=true] .item-share:not(:last-child) a:focus .share-icon,
html[dark=true] .item-share:not(:last-child) button:focus .share-icon,
html[dark=true] .border-grely {
   border-color: var(--dp-border-grely) !important;
}
html[dark=true] .border-grey {
   border-color: var(--dp-border-grey) !important;
}
html[dark=true] .border-black {
   border-color: var(--dp-border-black) !important;
}

/* Hover and focus */
html[dark=true] .hover-blue.active:not([disabled]),
html[dark=true] .hover-blue:not([disabled]):active,
html[dark=true] .hover-blue:not([disabled]):focus {
   color: var(--dp-hover-blue);
}
html[dark=true] .hover-background:not([disabled]).active,
html[dark=true] .hover-background:not([disabled]):active,
html[dark=true] .hover-background:not([disabled]):focus {
   background-color: var(--dp-hover-background);
}
@media(pointer: fine){
   html[dark=true] .item-share:not(:last-child) .share-icon:hover {
      background-color: var(--dp-bg-white);
      border: 1px solid var(--dp-border-grely);
   }

   html[dark=true] .item-share:last-child button:hover .share-icon g,
   html[dark=true] .item-share:last-child a:hover .share-icon g {
      stroke: var(--dp-bg-black);
   }

   html[dark=true] .btn-ddown:hover,
   html[dark=true] .btn_popup:not([disabled]):hover ~ .item-placeholder,
   html[dark=true] .item-file:not([disabled]):hover ~ .item-placeholder {
      border-color: var(--dp-border-blue) !important;
   }
   html[dark=true] .btn-ddown:hover span,
   html[dark=true] .btn-ddown:hover svg,
   html[dark=true] .btn-dfilter:not(.selected):hover svg,
   html[dark=true] .btn-dfilter:not(.selected):hover span,
   html[dark=true] .hover-blue:not([disabled]):hover {
      color: var(--dp-hover-blue);
   }
   html[dark=true] .hover-background:not([disabled]):hover {
      background-color: var(--dp-hover-background);
   }
}
