/*
Theme Name: Twenty Twenty-Five — Dark Mode (menirth.cz)
Theme URI: https://menirth.cz
Description: Child theme for Twenty Twenty-Five adding a Dark/Light mode toggle in the header (top-right). Created for menirth.cz
Author: ChatGPT (generated)
Template: twentytwentyfive
Version: 1.0.0
*/

/* Basic child theme stylesheet — the child inherits everything from the parent theme. */

/* --- Dark mode styles --- */

/* Toggle button */
#dark-toggle {
  background: none;
  border: 2px solid rgba(0,0,0,0.15);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.12s ease;
  position: absolute;
  top: 12px;
  right: 18px;
  z-index: 9999;
  backdrop-filter: blur(6px);
}

/* Hover effect */
#dark-toggle:hover { transform: scale(1.06); background: rgba(0,0,0,0.04); }

/* Dark mode root class */
body.dark-mode {
  background-color: #0f1112 !important;
  color: #e6e6e6 !important;
}

/* Affect common site blocks */
body.dark-mode .wp-site-blocks,
body.dark-mode .wp-block-group {
  background-color: transparent;
  color: #e6e6e6;
}

/* Links */
body.dark-mode a { color: #9fd3ff; }

/* Headings and text */
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode p {
  color: #f5f5f5;
}

/* Buttons */
body.dark-mode .wp-block-button__link {
  background-color: #222 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* Ensure toggle visible on mobile */
@media (max-width: 880px) {
  #dark-toggle { top: 8px; right: 12px; width:36px; height:36px; }
}

/* Minor safety: when admin bar present, shift toggle down */
body.admin-bar #dark-toggle { top: 46px; }