/* wcag-mode.css — WCAG 2.1: fontti & kontrasti (AA, osin AAA) */

/* ----------------------------------
   Perustypografia (perustaso)
---------------------------------- */
html,
body {
   font-size: 18px !important;
   font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
   line-height: 1.5 !important;
}

/* ----------------------------------
   Valkoinen sisältöalue: kontrasti
---------------------------------- */
.content,
.content *,
.content_form,
.content_form *,
.white-pink,
.white-pink * {
   color: #000 !important;
   background-image: none !important;
   /* varmistaa taustojen kontrastin */
}

/* Linkit vain sisältöalueella */
.content a,
.content_form a,
.white-pink a {
   color: #0033cc !important;
   /* ≥4.5:1 valkoisella */
   text-decoration: underline !important;
}

.content a:visited,
.content_form a:visited,
.white-pink a:visited {
   color: #0033cc !important;
}

.content a:hover,
.content_form a:hover,
.white-pink a:hover {
   color: #0033cc !important;
   text-decoration: underline !important;
   text-decoration-thickness: 2px !important;
   text-underline-offset: 2px !important;
   box-shadow: none !important;
}

/* ----------------------------------
   Näkyvä fokus sisältöalueella
---------------------------------- */
.content :focus-visible,
.content_form :focus-visible,
.white-pink :focus-visible,
.content a:focus-visible,
.content_form a:focus-visible,
.white-pink a:focus-visible,
.content input:focus-visible,
.content_form input:focus-visible,
.white-pink input:focus-visible,
.content select:focus-visible,
.content_form select:focus-visible,
.white-pink select:focus-visible,
.content textarea:focus-visible,
.content_form textarea:focus-visible,
.white-pink textarea:focus-visible,
.content [role="button"]:focus-visible,
.content_form [role="button"]:focus-visible,
.white-pink [role="button"]:focus-visible {
   outline: 3px solid #000 !important;
   outline-offset: 2px !important;
   border-radius: 4px;
}

/* Fallback selaimille ilman :focus-visible -tukea */
.content :focus,
.content_form :focus,
.white-pink :focus {
   outline: 3px solid #000 !important;
   outline-offset: 2px !important;
   border-radius: 4px;
}

@supports selector(:focus-visible) {

   .content :focus,
   .content_form :focus,
   .white-pink :focus {
      outline: none !important;
   }
}

/* Linkkilistat – vahva fokuskehys (ympäröinti) */
.content ul li>a:focus-visible,
.content ol li>a:focus-visible,
.content_form ul li>a:focus-visible,
.content_form ol li>a:focus-visible,
.white-pink ul li>a:focus-visible,
.white-pink ol li>a:focus-visible {
   outline: none !important;
   box-shadow: 0 0 0 3px #fff, 0 0 0 6px #000 !important;
   background: #fff !important;
   color: #000 !important;
   text-decoration: underline !important;
   border-radius: 4px;
}

/* Fallback :focus linkkilistoille */
.content ul li>a:focus,
.content ol li>a:focus,
.content_form ul li>a:focus,
.content_form ol li>a:focus,
.white-pink ul li>a:focus,
.white-pink ol li>a:focus {
   outline: none !important;
   box-shadow: 0 0 0 3px #fff, 0 0 0 6px #000 !important;
   background: #fff !important;
   color: #000 !important;
   text-decoration: underline !important;
   border-radius: 4px;
}

/* Placeholderit ja disabled-tekstit */
.content ::placeholder,
.content_form ::placeholder,
.white-pink ::placeholder {
   color: #111 !important;
   opacity: 1 !important;
}

.content [disabled],
.content_form [disabled],
.white-pink [disabled] {
   color: #111 !important;
   opacity: 1 !important;
}

/* Taulukot sisältöalueella */
.content table,
.content th,
.content td,
.content_form table,
.content_form th,
.content_form td,
.white-pink table,
.white-pink th,
.white-pink td {
   border-color: #000 !important;
   color: #000 !important;
}

/* Syötteet sisältöalueella */
.content input,
.content select,
.content textarea,
.content_form input,
.content_form select,
.content_form textarea,
.white-pink input,
.white-pink select,
.white-pink textarea {
   color: #000 !important;
   background-color: #fff !important;
   border-color: #000 !important;
}

/* Painikkeet sisältöalueella — peruskontrasti */
.content button,
.content .button,
.content .option_button,
.content .option_button_focus,
.content .btn,
.content_form button,
.content_form .button,
.content_form .option_button,
.content_form .option_button_focus,
.content_form .btn,
.white-pink button,
.white-pink .button,
.white-pink .option_button,
.white-pink .option_button_focus,
.white-pink .btn {
   color: #fff !important;
   background: #000 !important;
   border-color: #000 !important;
   text-shadow: none !important;
   background-image: none !important;
   position: relative !important;
   /* fokuskehän pseudo-elementtiä varten */
}

/* SVG-ikonit perivät tekstivärin */
.content svg:not([fill]),
.content_form svg:not([fill]),
.white-pink svg:not([fill]) {
   fill: currentColor !important;
}

.content svg:not([stroke]),
.content_form svg:not([stroke]),
.white-pink svg:not([stroke]) {
   stroke: currentColor !important;
}

/* ----------------------------------
   Dropzone: kontrasti + fokus
---------------------------------- */
.content .dropzone,
.content_form .dropzone,
.white-pink .dropzone {
   background-color: #fff !important;
   border: 3px dashed #000 !important;
}

.content .dropzone .dz-message,
.content_form .dropzone .dz-message,
.white-pink .dropzone .dz-message,
.content .dropzone .dz-message *,
.content_form .dropzone .dz-message *,
.white-pink .dropzone .dz-message * {
   background: transparent !important;
   color: #000 !important;
   text-shadow: none !important;
   box-shadow: none !important;
   font-size: clamp(17px, 2.4vw, 18px) !important;
   font-weight: 500 !important;
   line-height: 1.35 !important;
}

.content .dropzone .dz-message,
.content_form .dropzone .dz-message,
.white-pink .dropzone .dz-message {
   text-align: center !important;
}

/* Fokus: vahva focus-within kontille, maltillinen hover */
.dropzone,
.dz-clickable,
.dhl-dropzone {
   outline: none;
}

.dropzone:focus-within,
.dz-clickable:focus-within,
.dhl-dropzone:focus-within {
   box-shadow: 0 0 0 3px #fff, 0 0 0 6px #000;
   border-color: #000;
}

.dropzone:hover,
.dz-clickable:hover,
.dhl-dropzone:hover {
   border-color: #000;
   filter: brightness(0.98);
}

.dropzone input[type="file"]:focus-visible,
.dz-clickable input[type="file"]:focus-visible,
.dhl-dropzone input[type="file"]:focus-visible {
   outline: none;
}

/* ----------------------------------
   Header (keltainen alue) – FI | EN
---------------------------------- */
header,
.header {
   color: #000 !important;
}

header *,
.header * {
   color: #000 !important;
}

/* Oletus: link_disabled = valittu kieli, link_enabled = ei-valittu */
a.link_disabled {
   color: #000 !important;
   text-decoration: none !important;
   font-weight: 900 !important;
   font-size: 1.08em !important;
   cursor: default !important;
   pointer-events: none !important;
   white-space: nowrap !important;
}

a.link_enabled {
   color: #000 !important;
   text-decoration: underline !important;
   font-weight: 400 !important;
   font-size: 1em !important;
   white-space: nowrap !important;
}

/* Headerin fokus */
header a:focus-visible,
.header a:focus-visible,
header button:focus-visible,
.header button:focus-visible,
header [role="button"]:focus-visible,
.header [role="button"]:focus-visible,
header [tabindex]:focus-visible,
.header [tabindex]:focus-visible {
   outline: none !important;
   box-shadow: 0 0 0 3px #fff, 0 0 0 6px #000 !important;
   background: #fff !important;
   color: #000 !important;
   text-decoration: underline !important;
   border-radius: 4px;
}

/* Fallback :focus */
header a:focus,
.header a:focus,
header button:focus,
.header button:focus,
header [role="button"]:focus,
.header [role="button"]:focus,
header [tabindex]:focus,
.header [tabindex]:focus {
   outline: none !important;
   box-shadow: 0 0 0 3px #fff, 0 0 0 6px #000 !important;
   background: #fff !important;
   color: #000 !important;
   text-decoration: underline !important;
   border-radius: 4px;
}

/* ----------------------------
   Submit-painike: näkyvä fokus
----------------------------- */
#submit_button,
button#submit_button,
.btn.btn-secondary#submit_button {
   color: #fff !important;
   background: #000 !important;
   border-color: #000 !important;
   text-shadow: none !important;
   background-image: none !important;
   opacity: 1 !important;
   filter: none !important;
   position: relative !important;
}

#submit_button:focus-visible,
#submit_button:focus {
   box-shadow: inset 0 0 0 3px #fff, 0 0 0 3px #fff, 0 0 0 6px #000 !important;
   outline: 2px solid #000 !important;
   outline-offset: 2px !important;
   color: #fff !important;
   background: #000 !important;
   border-color: #000 !important;
}

#submit_button:focus-visible::after,
#submit_button:focus::after {
   content: "";
   pointer-events: none;
   position: absolute;
   z-index: 1;
   left: -6px;
   right: -6px;
   top: -6px;
   bottom: -6px;
   border: 3px solid #000;
   border-radius: 8px;
}

#submit_button:hover {
   background-color: #111 !important;
   outline: 2px solid #000 !important;
   outline-offset: 2px !important;
}

#submit_button:active {
   background-color: #222 !important;
}

#submit_button:disabled {
   opacity: 1 !important;
   filter: none !important;
   color: #fff !important;
   background: #000 !important;
   border-color: #000 !important;
}

#submit_button:disabled:hover,
#submit_button:disabled:focus,
#submit_button:disabled:focus-visible {
   outline: none !important;
   box-shadow: none !important;
}

/* ----------------------------------
   Footer (keltaisen kaistan tekstit)
---------------------------------- */
.footer-band,
.footer-copy,
.footer-powered {
   color: #000 !important;
   text-shadow: none !important;
}

.footer-copy,
.footer-powered {
   font-size: clamp(16px, 0.95rem, 17px);
   line-height: 1.4;
}

/* Jos footerissa on SVG-ikoneita */
.footer-band svg {
   fill: #000 !important;
   stroke: #000 !important;
}

/* -------------------------------------------------
   Skip to content -linkki: näkyy vain kun on fokus
---------------------------------------------------- */
.skip-link {
   position: absolute;
   left: -9999px;
   top: 0;
   padding: 0;
   margin: 0;
   z-index: 10000;
}

.skip-link:focus,
.skip-link:focus-visible {
   left: 0;
   top: 0;
   padding: 12px 16px;
   background: #000 !important;
   color: #fff !important;
   text-decoration: none !important;
   outline: 3px solid #fff !important;
   box-shadow: 0 0 0 6px #000 !important;
   border-radius: 6px;
}