/*
 * CSIRT.SK colour scheme
 *
 * The light theme keeps the current visual identity. The dark theme uses
 * near-black navy surfaces instead of pure black so the CSIRT blue and red
 * accents remain recognisable and readable.
 */

:root {
  color-scheme: light;
  --csirt-page-bg: #ffffff;
  --csirt-surface: #ffffff;
  --csirt-surface-alt: #f5f7fa;
  --csirt-surface-raised: #ffffff;
  --csirt-text: #111827;
  --csirt-text-muted: #626a6e;
  --csirt-border: #d7dde6;
  --csirt-link: #0065b3;
  --csirt-link-hover: #003f73;
  --csirt-warning-link: #9e1912;
  --csirt-warning-link-hover: #7d100b;
  --csirt-input-bg: #ffffff;
  --csirt-code-bg: #f2f4f7;
  --csirt-logo-bg: #ffffff;
  --csirt-subtle-button-bg: #a9acab;
  --csirt-subtle-button-text: #111827;
  --csirt-focus: #2b8cc4;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --csirt-page-bg: #090d18;
  --csirt-surface: #111827;
  --csirt-surface-alt: #182235;
  --csirt-surface-raised: #1c2739;
  --csirt-text: #e8edf5;
  --csirt-text-muted: #aeb8c6;
  --csirt-border: #344054;
  --csirt-link: #55b7fd;
  --csirt-link-hover: #a8d8ff;
  --csirt-warning-link: #ff7a86;
  --csirt-warning-link-hover: #ffadb5;
  --csirt-input-bg: #0f172a;
  --csirt-code-bg: #0c1323;
  --csirt-logo-bg: #e5e9f0;
  --csirt-subtle-button-bg: #2a3344;
  --csirt-subtle-button-text: #f1f5f9;
  --csirt-focus: #7cc7ff;
}

html,
body,
#site-wrapper,
#main,
#content-wrapper,
.wrapper {
  background-color: var(--csirt-page-bg);
  color: var(--csirt-text);
}

body,
#site-wrapper,
#main,
#content-wrapper,
.card,
.border,
.wi-cont,
.wp-caption,
.form-control,
input,
select,
textarea,
table,
th,
td {
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
  body,
  #site-wrapper,
  #main,
  #content-wrapper,
  .card,
  .border,
  .wi-cont,
  .wp-caption,
  .form-control,
  input,
  select,
  textarea,
  table,
  th,
  td {
    transition: none;
  }
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] legend,
html[data-theme="dark"] label,
html[data-theme="dark"] strong {
  color: var(--csirt-text);
}

/* WordPress content can contain inline colours or legacy utility classes.
   Important is intentional here so headings never remain black on dark pages. */
html[data-theme="dark"] #main h1,
html[data-theme="dark"] #main h2,
html[data-theme="dark"] #main h3,
html[data-theme="dark"] #main h4,
html[data-theme="dark"] #main h5,
html[data-theme="dark"] #main h6 {
  color: var(--csirt-text) !important;
}

html[data-theme="dark"] #main h1 a,
html[data-theme="dark"] #main h2 a,
html[data-theme="dark"] #main h3 a,
html[data-theme="dark"] #main h4 a,
html[data-theme="dark"] #main h5 a,
html[data-theme="dark"] #main h6 a {
  color: var(--csirt-link) !important;
}

html[data-theme="dark"] #main h1 a:hover,
html[data-theme="dark"] #main h1 a:focus-visible,
html[data-theme="dark"] #main h2 a:hover,
html[data-theme="dark"] #main h2 a:focus-visible,
html[data-theme="dark"] #main h3 a:hover,
html[data-theme="dark"] #main h3 a:focus-visible,
html[data-theme="dark"] #main h4 a:hover,
html[data-theme="dark"] #main h4 a:focus-visible,
html[data-theme="dark"] #main h5 a:hover,
html[data-theme="dark"] #main h5 a:focus-visible,
html[data-theme="dark"] #main h6 a:hover,
html[data-theme="dark"] #main h6 a:focus-visible {
  color: var(--csirt-link-hover) !important;
}

html[data-theme="dark"] #main h1 span,
html[data-theme="dark"] #main h1 strong,
html[data-theme="dark"] #main h1 em,
html[data-theme="dark"] #main h1 b,
html[data-theme="dark"] #main h2 span,
html[data-theme="dark"] #main h2 strong,
html[data-theme="dark"] #main h2 em,
html[data-theme="dark"] #main h2 b,
html[data-theme="dark"] #main h3 span,
html[data-theme="dark"] #main h3 strong,
html[data-theme="dark"] #main h3 em,
html[data-theme="dark"] #main h3 b,
html[data-theme="dark"] #main h4 span,
html[data-theme="dark"] #main h4 strong,
html[data-theme="dark"] #main h4 em,
html[data-theme="dark"] #main h4 b,
html[data-theme="dark"] #main h5 span,
html[data-theme="dark"] #main h5 strong,
html[data-theme="dark"] #main h5 em,
html[data-theme="dark"] #main h5 b,
html[data-theme="dark"] #main h6 span,
html[data-theme="dark"] #main h6 strong,
html[data-theme="dark"] #main h6 em,
html[data-theme="dark"] #main h6 b {
  color: inherit !important;
}

html[data-theme="dark"] #main a:not(.btn):not(.custom-btn):not(.page-link) {
  color: var(--csirt-link);
}

html[data-theme="dark"] #main a:not(.btn):not(.custom-btn):not(.page-link):hover,
html[data-theme="dark"] #main a:not(.btn):not(.custom-btn):not(.page-link):focus-visible {
  color: var(--csirt-link-hover);
}

html[data-theme="dark"] #main .bg-primary a,
html[data-theme="dark"] #main .bg-secondary a,
html[data-theme="dark"] #main .top-banner a,
html[data-theme="dark"] #main .banners-hold a,
html[data-theme="dark"] #main .social-link a {
  color: #ffffff;
}

html[data-theme="dark"] #main .bg-primary a:hover,
html[data-theme="dark"] #main .bg-primary a:focus-visible,
html[data-theme="dark"] #main .bg-secondary a:hover,
html[data-theme="dark"] #main .bg-secondary a:focus-visible,
html[data-theme="dark"] #main .top-banner a:hover,
html[data-theme="dark"] #main .top-banner a:focus-visible,
html[data-theme="dark"] #main .social-link a:hover,
html[data-theme="dark"] #main .social-link a:focus-visible {
  color: #ffffff;
}

html[data-theme="dark"] #main .text-primary,
html[data-theme="dark"] #main .breadcrumb-item a,
html[data-theme="dark"] #main h2.post-news {
  color: var(--csirt-link) !important;
}

html[data-theme="dark"] #main .text-primary:hover,
html[data-theme="dark"] #main .breadcrumb-item a:hover {
  color: var(--csirt-link-hover) !important;
}

html[data-theme="dark"] #main .text-secondary,
html[data-theme="dark"] #main h2.post-warning {
  color: var(--csirt-warning-link) !important;
}

html[data-theme="dark"] #main .text-secondary:hover {
  color: var(--csirt-warning-link-hover) !important;
}

html[data-theme="dark"] #main .text-light,
html[data-theme="dark"] .last-modify,
html[data-theme="dark"] .wp-block-image figcaption,
html[data-theme="dark"] .wp-block-image .aligncenter > figcaption,
html[data-theme="dark"] .wp-block-image .alignleft > figcaption,
html[data-theme="dark"] .wp-block-image .alignright > figcaption {
  color: var(--csirt-text-muted) !important;
}

/* Main content surfaces */
html[data-theme="dark"] .card,
html[data-theme="dark"] #sidebar .border,
html[data-theme="dark"] .wi-cont,
html[data-theme="dark"] .wp-caption,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .offcanvas {
  background-color: var(--csirt-surface);
  border-color: var(--csirt-border) !important;
  color: var(--csirt-text);
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .accordion-button:not(.collapsed),
html[data-theme="dark"] .section-title {
  background-color: var(--csirt-surface-alt);
  border-color: var(--csirt-border);
  color: var(--csirt-text);
}

html[data-theme="dark"] .post-content,
html[data-theme="dark"] .post-item .body,
html[data-theme="dark"] .content-holder,
html[data-theme="dark"] .page-body,
html[data-theme="dark"] article,
html[data-theme="dark"] aside {
  color: var(--csirt-text);
}

html[data-theme="dark"] .border,
html[data-theme="dark"] hr,
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .xmtree > li > a,
html[data-theme="dark"] .xmtree > li > ul > li > a,
html[data-theme="dark"] .xmtree .page_item_has_children > a {
  border-color: var(--csirt-border) !important;
}

html[data-theme="dark"] .video-border,
html[data-theme="dark"] blockquote,
html[data-theme="dark"] pre,
html[data-theme="dark"] code,
html[data-theme="dark"] kbd,
html[data-theme="dark"] samp {
  background-color: var(--csirt-code-bg);
  color: var(--csirt-text);
  border-color: var(--csirt-border);
}

html[data-theme="dark"] .wp-caption p.wp-caption-text {
  background-color: rgba(17, 24, 39, 0.96);
  color: var(--csirt-text);
}

/* Tables */
html[data-theme="dark"] table,
html[data-theme="dark"] .table {
  --bs-table-bg: var(--csirt-surface);
  --bs-table-striped-bg: var(--csirt-surface-alt);
  --bs-table-striped-color: var(--csirt-text);
  --bs-table-hover-bg: var(--csirt-surface-raised);
  --bs-table-hover-color: var(--csirt-text);
  color: var(--csirt-text);
  background-color: var(--csirt-surface);
  border-color: var(--csirt-border);
}

html[data-theme="dark"] th,
html[data-theme="dark"] thead th {
  color: var(--csirt-text);
  background-color: #243047;
}

html[data-theme="dark"] tbody tr:nth-of-type(2n) {
  background-color: var(--csirt-surface-alt);
}

html[data-theme="dark"] table > tbody > tr > td,
html[data-theme="dark"] table > tbody > tr > th,
html[data-theme="dark"] table > tfoot > tr > td,
html[data-theme="dark"] table > tfoot > tr > th,
html[data-theme="dark"] table > thead > tr > td,
html[data-theme="dark"] table > thead > tr > th {
  border-color: var(--csirt-border);
}

/* Forms */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] input:not([type="button"]):not([type="submit"]):not([type="reset"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: var(--csirt-input-bg);
  border-color: #526077;
  color: var(--csirt-text);
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #98a4b5;
  opacity: 1;
}

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] textarea:disabled {
  background-color: #202a3d;
  color: #b8c2cf;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  border-color: var(--csirt-focus);
  box-shadow: 0 0 0 0.2rem rgba(124, 199, 255, 0.22);
}

/* Pagination */
html[data-theme="dark"] .page-link {
  color: var(--csirt-link);
  background-color: var(--csirt-surface);
  border-color: var(--csirt-border);
}

html[data-theme="dark"] .page-link:hover,
html[data-theme="dark"] .page-link:focus {
  color: var(--csirt-link-hover);
  background-color: var(--csirt-surface-alt);
  border-color: #526077;
}

html[data-theme="dark"] .page-item.disabled .page-link {
  color: #8a96a8;
  background-color: #151d2c;
  border-color: var(--csirt-border);
}

html[data-theme="dark"] .page-item.active .page-link {
  color: #ffffff;
  background-color: #174a8b;
  border-color: #55b7fd;
}

/* Header logo. The dark variant changes only the navy artwork to an
   off-white tone and therefore does not need a bright plate behind it. */
.site-logo-image--dark {
  display: none;
}

html[data-theme="dark"] #header #site-logo {
  background-color: #000040;
  box-shadow: none;
}

html[data-theme="dark"] .site-logo-image--light {
  display: none;
}

html[data-theme="dark"] .site-logo-image--dark {
  display: block;
}

html[data-theme="dark"] #header .megamenu {
  background-color: var(--csirt-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] #header .megamenu .backBttn,
html[data-theme="dark"] #header .megamenu .-mega-widget > ul,
html[data-theme="dark"] #header .megamenu .-mega-widget ul li ul,
html[data-theme="dark"] #header #site-nav ._wrapper ._part.site-search-nav,
html[data-theme="dark"] #header #site-nav ._wrapper ._part.site-options {
  background-color: var(--csirt-surface-alt);
}

html[data-theme="dark"] #header .megamenu .-mega-widget .-title,
html[data-theme="dark"] #header .megamenu .-mega-widget ul li a,
html[data-theme="dark"] #header .megamenu .backBttn,
html[data-theme="dark"] #header #site-nav ._wrapper ._part.site-options ul li a {
  color: var(--csirt-link);
}

html[data-theme="dark"] #header .megamenu .-mega-widget ul li a:hover,
html[data-theme="dark"] #header .megamenu .-mega-widget ul li a:focus-visible {
  color: var(--csirt-link-hover);
}

html[data-theme="dark"] #header .site-search .search input {
  background-color: var(--csirt-input-bg);
  color: var(--csirt-text);
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] #header .site-search.active #formSend {
  background-color: var(--csirt-surface-alt);
}

html[data-theme="dark"] .sort-menu-bg,
html[data-theme="dark"] .navbar-brand {
  background-color: var(--csirt-surface);
}

@media only screen and (max-width: 768px) {
  html[data-theme="dark"] #header #site-nav {
    background-color: var(--csirt-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
  }
}

/* Sidebar and front-page action buttons */
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] a.custom-btn.bg-light {
  background-color: var(--csirt-subtle-button-bg) !important;
  color: var(--csirt-subtle-button-text) !important;
}

html[data-theme="dark"] .bg-light:hover,
html[data-theme="dark"] a.custom-btn.bg-light:hover,
html[data-theme="dark"] a.custom-btn.bg-light:focus-visible {
  background-color: #39465c !important;
  color: #ffffff !important;
}

html[data-theme="dark"] a.custom-btn.bg-primary,
html[data-theme="dark"] .btn-primary {
  background-color: #142a71 !important;
  border-color: #2b5db2 !important;
}

html[data-theme="dark"] a.custom-btn.bg-primary:hover,
html[data-theme="dark"] a.custom-btn.bg-primary:focus-visible,
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus-visible {
  background-color: #1b3b91 !important;
}

html[data-theme="dark"] a.custom-btn {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] a.custom-btn:focus-visible,
html[data-theme="dark"] .btn:focus-visible,
html[data-theme="dark"] #main a:focus-visible {
  outline: 3px solid var(--csirt-focus);
  outline-offset: 3px;
  box-shadow: none;
}

/* WordPress calendar */
html[data-theme="dark"] #wp-calendar caption,
html[data-theme="dark"] #wp-calendar tbody {
  color: var(--csirt-text-muted);
}

html[data-theme="dark"] #wp-calendar tbody td {
  background-color: var(--csirt-surface-alt);
  border-color: var(--csirt-border);
}

html[data-theme="dark"] #wp-calendar tbody td:hover {
  background-color: var(--csirt-surface-raised);
}

/* Less common theme components */
html[data-theme="dark"] .custom-form .btn-default:hover,
html[data-theme="dark"] .custom-form .btn-default:focus,
html[data-theme="dark"] .custom-form .btn-default:active,
html[data-theme="dark"] .custom-form .btn-default:active:focus {
  background-color: var(--csirt-surface);
  color: var(--csirt-link);
}

html[data-theme="dark"] .gallery-box img {
  border-color: var(--csirt-border);
}

html[data-theme="dark"] #notifyModal .modal-content {
  color: var(--csirt-text) !important;
}

html[data-theme="dark"] #notifyModal .modal-content > .border-bottom {
  background-color: var(--csirt-logo-bg);
  border-color: var(--csirt-border) !important;
}

html[data-theme="dark"] #footer._alt {
  background-color: var(--csirt-surface-alt);
}

html[data-theme="dark"] #footer._alt .widget,
html[data-theme="dark"] #footer._alt .widget a,
html[data-theme="dark"] #footer._alt #footer-bottom ul li a {
  color: var(--csirt-text);
}

/* Footer theme switch */
.theme-toggle-wrap {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  padding: 0.55rem 0.8rem 0.55rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
}

.theme-toggle__icons {
  position: relative;
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.theme-toggle__icon {
  width: 1.25rem;
  height: 1.25rem;
}

.theme-toggle__icon--sun {
  display: none;
}

html[data-theme="dark"] .theme-toggle__icon--moon {
  display: none;
}

html[data-theme="dark"] .theme-toggle__icon--sun {
  display: block;
}

.theme-toggle-menu-item {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.theme-toggle--icon {
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  justify-content: center;
  border-color: rgba(255, 255, 255, 0.72);
  border-radius: 8px;
}

.theme-toggle--header {
  vertical-align: middle;
}

.theme-toggle:focus-visible {
  outline: 3px solid #7cc7ff;
  outline-offset: 3px;
}

.theme-toggle__track {
  position: relative;
  display: inline-block;
  width: 2.75rem;
  height: 1.5rem;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: #6b7280;
}

.theme-toggle__thumb {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: transform 160ms ease;
}

.theme-toggle[aria-checked="true"] .theme-toggle__track {
  background: #2b8cc4;
}

.theme-toggle[aria-checked="true"] .theme-toggle__thumb {
  transform: translateX(1.25rem);
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle__thumb {
    transition: none;
  }
}

@media only screen and (max-width: 767px) {
  #header .theme-toggle-menu-item {
    display: inline-flex;
    align-items: center;
    padding: 0 4px !important;
  }

  #footer #footer-bottom {
    height: auto;
    min-height: 90px;
    padding-bottom: 1.25rem;
  }

  .theme-toggle-wrap {
    margin-top: 0;
  }
}

/* JavaScript normally sets data-theme before the stylesheets load. This is a
   fallback for browsers where the early script is blocked. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    background-color: #090d18;
  }

  html:not([data-theme]) body,
  html:not([data-theme]) #site-wrapper,
  html:not([data-theme]) #main,
  html:not([data-theme]) #content-wrapper {
    background-color: #090d18;
    color: #e8edf5;
  }
}

@media print {
  .theme-toggle-wrap {
    display: none !important;
  }

  html[data-theme="dark"],
  html[data-theme="dark"] body,
  html[data-theme="dark"] #site-wrapper,
  html[data-theme="dark"] #main,
  html[data-theme="dark"] #content-wrapper,
  html[data-theme="dark"] .card,
  html[data-theme="dark"] #sidebar .border {
    background: #ffffff !important;
    color: #000000 !important;
  }
}