/*
Theme Name: Klaro
Theme URI: https://github.com/rafael-minuesa/klaro
Author: Rafael Minuesa
Author URI: https://github.com/rafael-minuesa
Description: An accessibility-first WordPress theme for content sites and WooCommerce stores. Klaro ships WCAG AAA color contrast, keyboard navigation, screen reader support, and a visitor toolbar with text sizing, high contrast, dark and monochrome modes, color vision filters, a dyslexia-friendly font, and reading aids. Its WooCommerce integration covers the shop, product pages, cart, and checkout, so customers with disabilities can browse and buy independently. The free Klaro Admin Accessibility plugin (wordpress.org/plugins/klaro-admin-accessibility/) brings the same accessibility to the WordPress admin.
Version: 2.9.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: klaro
Tags: accessibility-ready, one-column, two-columns, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, e-commerce

Klaro WordPress Theme, Copyright 2025 Rafael Minuesa.
Klaro is free software: you can redistribute it and/or modify it
under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 2 of the License, or
any later version.

Klaro is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
for more details.

You should have received a copy of the GNU General Public License
along with Klaro. If not, see http://www.gnu.org/licenses/gpl-2.0.html.
*/

/* ==========================================================================
   ACCESSIBILITY-FIRST RESET & BASE STYLES
   ========================================================================== */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* CSS Variables for Accessibility Customization */
:root {
  /* WCAG AAA Contrast Ratios (7:1 minimum) */
  --color-background: #FFFFFF;
  --color-text: #000000;
  --color-link: #0051A5;
  --color-link-visited: #5B00A5;
  --color-link-hover: #003D7A;
  --color-focus: #C2410C;
  --color-border: #333333;
  --color-heading: #000000;
  --color-primary: #0051A5;
  --color-text-secondary: #333333;
  --color-bg-secondary: #F5F5F5;
  --color-error-bg: #FFE5E5;
  --color-error-border: #CC0000;
  --color-success-bg: #E5F7E5;
  --color-success-border: #006600;
  --color-notice-text: #000000;

  /* Spacing - generous for readability */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  
  /* Typography */
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-size-base: 18px;
  --line-height-base: 1.8;
  --letter-spacing-base: 0.02em;
  
  /* Touch targets - minimum 44x44px */
  --touch-target-min: 44px;
  
  /* Focus indicator */
  --focus-outline-width: 3px;
  --focus-outline-offset: 2px;
}

/* High Contrast Mode */
.klaro-high-contrast {
  --color-background: #000000;
  --color-text: #FFFFFF;
  --color-link: #00D4FF;
  --color-link-visited: #CC99FF;
  --color-link-hover: #FFFFFF;
  --color-focus: #FFFF00;
  --color-border: #FFFFFF;
  --color-heading: #FFFFFF;
  --color-primary: #00D4FF;
  --color-text-secondary: #CCCCCC;
  --color-bg-secondary: #1A1A1A;
  --color-error-bg: #330000;
  --color-error-border: #FF9999;
  --color-success-bg: #003300;
  --color-success-border: #99FF99;
  --color-notice-text: #FFFFFF;
}

/* Monochrome Mode */
.klaro-monochrome {
  --color-background: #FFFFFF;
  --color-text: #000000;
  --color-link: #000000;
  --color-link-visited: #000000;
  --color-link-hover: #333333;
  --color-focus: #000000;
  --color-border: #000000;
  --color-heading: #000000;
  --color-primary: #000000;
  --color-text-secondary: #333333;
  --color-bg-secondary: #F0F0F0;
  --color-error-bg: #F0F0F0;
  --color-error-border: #000000;
  --color-success-bg: #F0F0F0;
  --color-success-border: #000000;
  --color-notice-text: #000000;
}

/* Dark Mode - softer dark scheme than High Contrast, still WCAG AAA (7:1 text, 3:1 UI) */
.klaro-dark {
  --color-background: #121212;
  --color-text: #E6E6E6;
  --color-link: #8AB4F8;
  --color-link-visited: #C9A7F5;
  --color-link-hover: #AECBFA;
  --color-focus: #FB923C;
  --color-border: #9AA0A6;
  --color-heading: #F5F5F5;
  --color-primary: #8AB4F8;
  --color-text-secondary: #C4C7CA;
  --color-bg-secondary: #1E1E1E;
  --color-error-bg: #3B1219;
  --color-error-border: #F28B82;
  --color-success-bg: #0F2A12;
  --color-success-border: #81C995;
  --color-notice-text: #E6E6E6;
}

/*
 * Color Vision Filters (daltonization)
 *
 * Each filter references an feColorMatrix defined inline in footer.php. The
 * matrices shift the color information a dichromat cannot perceive into a
 * part of the spectrum they can, rather than simulating the deficiency.
 * Applied to .site-container instead of body so the admin bar (a
 * position: fixed child of body, which a filter on body would break)
 * stays untouched.
 */
body.klaro-filter-protanopia .site-container {
  filter: url('#klaro-daltonize-protanopia');
}

body.klaro-filter-deuteranopia .site-container {
  filter: url('#klaro-daltonize-deuteranopia');
}

body.klaro-filter-tritanopia .site-container {
  filter: url('#klaro-daltonize-tritanopia');
}

/* Toolbar text sizes, applied to the html element. Each step scales the
   site's base size (--font-size-base, set in the Customizer) instead of
   forcing a fixed pixel value, so "increase" always enlarges the text. With
   the default 18px base the steps are 20, 22, 26 and 32px. */
html.klaro-medium-text {
  --klaro-text-scale: 1.111;
  --line-height-base: 1.9;
}

html.klaro-large-text {
  --klaro-text-scale: 1.222;
  --line-height-base: 2.0;
}

html.klaro-extra-large-text {
  --klaro-text-scale: 1.444;
  --line-height-base: 2.1;
}

html.klaro-maximum-text {
  --klaro-text-scale: 1.778;
  --line-height-base: 2.2;
}

/*
 * Dyslexia-Friendly Font Mode (JavaScript toggle)
 *
 * OpenDyslexic by Abbie Gonzalez, SIL Open Font License 1.1
 * (fonts/OFL.txt). The files are only downloaded when the mode is
 * active: browsers fetch a @font-face source the first time an
 * element actually renders with that family.
 */
@font-face {
  font-family: "OpenDyslexic";
  src: url("fonts/OpenDyslexic-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "OpenDyslexic";
  src: url("fonts/OpenDyslexic-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "OpenDyslexic";
  src: url("fonts/OpenDyslexic-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "OpenDyslexic";
  src: url("fonts/OpenDyslexic-BoldItalic.woff2") format("woff2");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

body.klaro-dyslexia-font {
  --font-base: "OpenDyslexic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Form controls do not inherit fonts by default */
body.klaro-dyslexia-font button,
body.klaro-dyslexia-font input,
body.klaro-dyslexia-font select,
body.klaro-dyslexia-font textarea {
  font-family: var(--font-base);
}

/* ==========================================================================
   Reading Aids (JavaScript toggles)
   ========================================================================== */

/* Increased text spacing - the WCAG 1.4.12 Text Spacing values */
body.klaro-reading-spacing {
  --letter-spacing-base: 0.12em;
  --line-height-base: 2;
  word-spacing: 0.16em;
}

body.klaro-reading-spacing p {
  margin-bottom: 2em;
}

/* Link highlighting - box-shadow + currentColor so it follows every color
   mode and never competes with the outline-based focus indicators */
body.klaro-highlight-links a {
  box-shadow: 0 0 0 2px currentColor;
  border-radius: 2px;
}

/* Large cursor - inline SVG arrow (44px, white-outlined for visibility on
   any background). Interactive elements keep their native cursors, so the
   pointer affordance over links and buttons is preserved. */
body.klaro-big-cursor {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 32 32'%3E%3Cpath d='M6 2v24l6-6 4 9 3.5-1.6-3.9-8.8H24z' fill='%23000' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 8 3, default;
}

/* Reduce Motion Mode - Applied to html element (JavaScript toggle) */
html.klaro-reduce-motion,
html.klaro-reduce-motion *,
html.klaro-reduce-motion *::before,
html.klaro-reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */

* {
  box-sizing: border-box;
}

html {
  font-size: calc(var(--font-size-base) * var(--klaro-text-scale, 1));
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-base);
  font-size: 1rem;
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-text);
  background-color: var(--color-background);
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow-x: hidden;
}

/* ==========================================================================
   SKIP LINKS - Most Important Accessibility Feature
   ========================================================================== */

.skip-links {
  margin: 0;
  padding: 0;
}

.skip-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.skip-links li {
  margin: 0;
  padding: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 10000;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-focus);
  color: var(--color-background);
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
  border: var(--focus-outline-width) solid var(--color-text);
}

/* Keep skip-link text color fixed across all link states so the generic
   a:visited / a:hover rules (higher specificity) can't override it. */
.skip-link:link,
.skip-link:visited,
.skip-link:hover,
.skip-link:active,
.skip-link:focus {
  color: var(--color-background);
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
  outline: var(--focus-outline-width) solid var(--color-focus);
  outline-offset: var(--focus-outline-offset);
}

/* ==========================================================================
   FOCUS INDICATORS - Highly Visible
   ========================================================================== */

*:focus {
  outline: var(--focus-outline-width) solid var(--color-focus);
  outline-offset: var(--focus-outline-offset);
  scroll-margin-top: 2rem;
}

*:focus:not(:focus-visible) {
  outline: none;
}

/* Keyboard focus: the outline in the focus color sits inside a halo in the
   page background color (the box-shadow reaches 2px past the outline). Seen
   from the element outward that gives background, focus color, background,
   so the ring stays visible whatever the element or its surroundings are,
   including the monochrome mode's black outline on a black block. */
*:focus-visible {
  outline: var(--focus-outline-width) solid var(--color-focus);
  outline-offset: var(--focus-outline-offset);
  box-shadow: 0 0 0 calc(var(--focus-outline-offset) + var(--focus-outline-width) + 2px) var(--color-background);
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-heading);
  letter-spacing: 0.01em;
}

/* Inside a block with its own text color (a Group with a dark background,
   the theme's CTA pattern) headings take that color instead of the global
   heading color, which otherwise renders black on black. */
.has-text-color h1,
.has-text-color h2,
.has-text-color h3,
.has-text-color h4,
.has-text-color h5,
.has-text-color h6 {
  color: inherit;
}

h1 {
  font-size: 2.5rem;
  margin-top: 0;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1.125rem;
}

p {
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  max-width: 70ch; /* Optimal reading length */
}

/* ==========================================================================
   LINKS
   ========================================================================== */

a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: none; /* Instant for accessibility */
}

a:visited {
  color: var(--color-link-visited);
}

a:hover,
a:active {
  color: var(--color-link-hover);
  text-decoration-thickness: 3px;
}

/* Ensure link text is descriptive - handled in PHP */
a[href="#"],
a[href=""],
a:not([href]) {
  color: var(--color-text);
  text-decoration: none;
  cursor: not-allowed;
}

/* ==========================================================================
   LAYOUT STRUCTURE
   ========================================================================== */

.site-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-header {
  padding: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
}

.site-footer {
  padding: var(--spacing-lg);
}

.site-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm) var(--spacing-lg);
  flex-wrap: wrap;
  text-align: center;
}

.site-info p {
  margin: 0;
}

@media (max-width: 600px) {
  .site-info {
    flex-direction: column;
  }
}

/* Header Top - Logo and Accessibility Toolbar */
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

/* Site Branding - consistent styling for h1 and p */
.site-title {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.site-title a {
  color: var(--color-heading);
  text-decoration: none;
}

.site-title a:hover,
.site-title a:focus {
  text-decoration: underline;
}

.site-description {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text);
}

.site-main {
  flex: 1;
  padding: var(--spacing-lg);
  padding-top: var(--spacing-xs);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.content-area {
  margin-bottom: var(--spacing-xl);
}

/* Sidebar layout. body.has-sidebar is added by klaro_has_sidebar() when the
   primary widget area holds widgets and the page is not a WooCommerce page;
   the same condition controls the sidebar markup and its skip link. */
.sidebar {
  display: none;
}

.has-sidebar .site-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  column-gap: var(--spacing-xl);
  align-items: start;
  max-width: 1400px;
}

/* .site-main holds three direct children: breadcrumbs, content, sidebar.
   Breadcrumbs span both columns, content and sidebar sit side by side. */
.has-sidebar .site-main > .breadcrumbs {
  grid-column: 1 / -1;
}

.has-sidebar .content-area {
  grid-column: 1;
  min-width: 0;
}

.has-sidebar .sidebar {
  display: block;
  grid-column: 2;
  min-width: 0;
}

/* Narrow viewports and 200%+ zoom: one column, sidebar after the content. */
@media (max-width: 900px) {
  .has-sidebar .site-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .has-sidebar .site-main > .breadcrumbs,
  .has-sidebar .content-area,
  .has-sidebar .sidebar {
    grid-column: 1;
  }
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.main-navigation {
  margin-bottom: var(--spacing-sm);
}

.main-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.main-navigation li {
  position: relative;
}

.main-navigation a {
  display: flex;
  align-items: center;
  padding: 0.1em 1em;
  min-height: var(--touch-target-min);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  text-align: center;
  font-weight: 600;
  text-decoration: none;
}

.main-navigation a:hover,
.main-navigation a:focus {
  background: var(--color-text);
  color: var(--color-background);
}

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
  background: var(--color-text);
  color: var(--color-background);
  font-weight: 700;
}

/* Submenu - Accessible Dropdown */
.main-navigation .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 200px;
  padding: 0;
  margin: 0;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  flex-direction: column;
  gap: 0;
}

.main-navigation .sub-menu li {
  width: 100%;
  margin: 0;
  padding: 0;
}

.main-navigation .sub-menu a {
  border: none;
  border-radius: 0;
  padding: 0.4em 1em;
  text-align: left;
  width: 100%;
  font-size: 0.9rem;
}

.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu a:focus {
  background: var(--color-text);
  color: var(--color-background);
}

/* Mouse users: reveal submenu on hover. Keyboard users: the toggle button
   below controls an explicit, persistent open state so submenu items stay
   reachable both forwards and backwards (Shift + Tab). After the script
   closes a submenu (Escape, toggle, outside click) it marks the item
   submenu-dismissed until the pointer leaves, so the hover rule cannot keep
   a submenu visible that the button reports as collapsed. */
.main-navigation li:hover:not(.submenu-dismissed) > .sub-menu,
.main-navigation li.submenu-open > .sub-menu {
  display: flex;
}

/* Without JavaScript there is no toggle button: keep a submenu open while
   keyboard focus is inside its parent item. */
.no-js .main-navigation li:focus-within > .sub-menu {
  display: flex;
}

/* Submenu parent item lays out the link and its toggle button side by side. */
.main-navigation .menu-item-has-children {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.main-navigation .menu-item-has-children > a {
  flex: 1 1 auto;
}

/* Submenu toggle button - a real control with its own focusable target. */
.main-navigation .submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: 0 0.6em;
  background: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  line-height: 1;
}

.main-navigation .submenu-toggle:hover,
.main-navigation .submenu-toggle:focus {
  background: var(--color-text);
  color: var(--color-background);
}

/* Indicator arrow lives on the toggle button and flips when expanded. */
.main-navigation .submenu-toggle::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.15s ease;
}

.main-navigation .submenu-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* Nested submenus */
.main-navigation .sub-menu .sub-menu {
  top: 0;
  left: 100%;
}

/* Narrow viewports and high zoom: submenus flow in place under their parent
   instead of floating, so nested levels never leave the viewport. */
@media (max-width: 900px) {
  .main-navigation .sub-menu,
  .main-navigation .sub-menu .sub-menu {
    position: static;
    width: 100%;
    min-width: 0;
    box-shadow: none;
    border-radius: 0;
  }

  .main-navigation .sub-menu .sub-menu {
    border-width: 0 0 0 3px;
    margin-left: 1em;
  }
}

/* ==========================================================================
   ACCESSIBILITY TOOLBAR - Compact Top-Right Design
   ========================================================================== */

.klaro-accessibility-toolbar {
  position: relative;
}

.klaro-accessibility-menu {
  position: relative;
}

.klaro-accessibility-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0.4rem 0.85rem;
  background: var(--color-text);
  color: var(--color-background);
  border: 1px solid var(--color-text);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  min-height: var(--touch-target-min);
  list-style: none;
}

.klaro-accessibility-toggle .klaro-accessibility-icon {
  width: 1em;
  height: 1em;
  font-size: 1.333rem;
  flex-shrink: 0;
  display: inline-block;
  line-height: 1;
}

.klaro-accessibility-toggle:hover,
.klaro-accessibility-toggle:focus {
  background: var(--color-background);
  color: var(--color-text);
  outline: var(--focus-outline-width) solid var(--color-focus);
  outline-offset: var(--focus-outline-offset);
}

/* Remove default marker */
.klaro-accessibility-toggle::marker,
.klaro-accessibility-toggle::-webkit-details-marker {
  display: none;
}

.klaro-accessibility-controls {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--spacing-xs);
  padding: var(--spacing-md);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  min-width: 280px;
}

/* Only show when details is open */
.klaro-accessibility-menu:not([open]) .klaro-accessibility-controls {
  display: none;
}

.klaro-accessibility-section {
  margin-bottom: var(--spacing-md);
}

.klaro-accessibility-section:last-child {
  margin-bottom: 0;
}

/* Reset all: set apart from the per-setting controls above it */
.klaro-accessibility-reset {
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}

.klaro-accessibility-section-label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: var(--spacing-xs);
  color: var(--color-text);
}

.klaro-accessibility-buttons {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.klaro-accessibility-button {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: 0.25rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.klaro-accessibility-button:hover,
.klaro-accessibility-button:focus {
  background-color: var(--color-text);
  color: var(--color-background);
  outline: var(--focus-outline-width) solid var(--color-focus);
  outline-offset: var(--focus-outline-offset);
}

.klaro-accessibility-button[aria-pressed="true"] {
  background-color: var(--color-text);
  color: var(--color-background);
  font-weight: 700;
}

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
  .header-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .klaro-accessibility-toolbar {
    width: 100%;
  }

  .klaro-accessibility-toggle {
    width: 100%;
    justify-content: center;
  }

  .klaro-accessibility-controls {
    right: auto;
    left: 0;
    width: 100%;
    min-width: auto;
  }
}

/* ==========================================================================
   FORMS
   ========================================================================== */

label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 600;
  font-size: 1.125rem;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
  width: 100%;
  max-width: 600px;
  padding: var(--spacing-sm);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  min-height: var(--touch-target-min);
}

/* Let WooCommerce Blocks handle their own form styling */
.wc-blocks-components-select__select,
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-combobox input {
  max-width: none;
}

textarea {
  min-height: 150px;
  resize: vertical;
}

input[type="submit"],
button,
.button {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-background);
  background-color: var(--color-text);
  border: 1px solid var(--color-text);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

input[type="submit"]:hover,
input[type="submit"]:focus,
button:hover,
button:focus,
.button:hover,
.button:focus {
  background-color: var(--color-background);
  color: var(--color-text);
}

/* Required field indicator */
.required {
  color: var(--color-text);
  font-weight: 700;
}

/* Error messages - highly visible */
.error-message,
.wpcf7-not-valid-tip {
  display: block;
  margin-top: var(--spacing-xs);
  padding: var(--spacing-sm);
  background: var(--color-error-bg, #FFE5E5);
  border: 3px solid var(--color-error-border, #CC0000);
  color: var(--color-notice-text, #000000);
  font-weight: 600;
  border-radius: 0;
}

/* Success messages */
.success-message {
  display: block;
  padding: var(--spacing-md);
  background: var(--color-success-bg, #E5F7E5);
  border: 3px solid var(--color-success-border, #006600);
  color: var(--color-notice-text, #000000);
  font-weight: 600;
  margin-bottom: var(--spacing-lg);
}

/* ==========================================================================
   CODE & PREFORMATTED TEXT
   ========================================================================== */

pre {
  max-width: 100%;
  overflow-x: auto;
  padding: var(--spacing-md);
  background: var(--color-bg-secondary, #F5F5F5);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.6;
}

code {
  font-size: 0.9em;
  padding: 0.15em 0.3em;
  background: var(--color-bg-secondary, #F5F5F5);
  border-radius: 4px;
}

pre code {
  padding: 0;
  background: none;
  border-radius: 0;
}

/* ==========================================================================
   IMAGES & MEDIA
   ========================================================================== */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

figure {
  margin: var(--spacing-lg) 0;
}

figcaption {
  margin-top: var(--spacing-sm);
  font-style: italic;
  padding: var(--spacing-sm);
  background: var(--color-bg-secondary, #F5F5F5);
  border-left: 4px solid var(--color-border);
}

/* Ensure images have alt text - handled in PHP */
img:not([alt]) {
  border: 5px solid red;
}

/* Responsive embeds */
iframe,
embed,
object,
video {
  max-width: 100%;
}

/* ==========================================================================
   TABLES
   ========================================================================== */

table {
  width: 100%;
  margin: var(--spacing-lg) 0;
  border-collapse: collapse;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

thead {
  background: var(--color-text);
  color: var(--color-background);
}

th,
td {
  padding: var(--spacing-sm);
  text-align: left;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

th {
  font-weight: 700;
}

tbody tr:nth-child(even) {
  background: var(--color-bg-secondary, #F5F5F5);
}

/* ==========================================================================
   LISTS
   ========================================================================== */

ul, ol {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-xl);
}

li {
  margin-bottom: var(--spacing-sm);
  line-height: var(--line-height-base);
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

.breadcrumbs {
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-sm);
  background: var(--color-bg-secondary, #F5F5F5);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

/* High contrast mode breadcrumbs */
.klaro-high-contrast .breadcrumbs {
  background: #000000;
  border-color: #FFFFFF;
}

.klaro-high-contrast .breadcrumbs a,
.klaro-high-contrast .breadcrumbs span {
  color: #FFFFFF;
}

.klaro-high-contrast .breadcrumbs a:hover,
.klaro-high-contrast .breadcrumbs a:focus {
  color: #00D4FF;
}

.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.breadcrumbs li {
  margin: 0;
}

.breadcrumbs li:not(:last-child)::after {
  content: "\203A";
  margin-left: var(--spacing-xs);
  font-weight: 700;
}

/* ==========================================================================
   POSTS & CONTENT
   ========================================================================== */

/* Scoped to the article: body_class() also puts "page" on <body> on every
   page, and the bare selector gave the whole document this bottom padding,
   margin and border below the footer. */
article.post,
article.page {
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 2px solid var(--color-border);
}

/* The separator divides entries from what follows them. An article that is
   the last thing in the content area (a page, or a post with no comments or
   navigation below it) ends with its content instead. */
.content-area > article:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.entry-content:last-child,
.entry-content > :last-child {
  margin-bottom: 0;
}

.entry-header {
  margin-bottom: var(--spacing-lg);
}

.entry-title {
  margin-bottom: var(--spacing-sm);
}

.entry-meta {
  font-size: 0.95rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm);
  background: var(--color-bg-secondary, #F5F5F5);
  border-left: 4px solid var(--color-border);
}

.entry-content {
  margin-bottom: var(--spacing-lg);
  overflow-wrap: break-word;
}

.entry-content table {
  display: block;
  overflow-x: auto;
}

.entry-footer {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   COMMENTS
   ========================================================================== */

.comments-area {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-xl);
  border-top: 3px solid var(--color-border);
}

.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment {
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-secondary, #F5F5F5);
}

.comment-author {
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: var(--spacing-xs);
}

.comment-metadata {
  font-size: 0.9rem;
  margin-bottom: var(--spacing-sm);
}

.comment-content {
  margin-top: var(--spacing-sm);
}

.reply {
  margin-top: var(--spacing-sm);
}

/* ==========================================================================
   BLOCKS
   ========================================================================== */

/* Block buttons use the theme's mode colors. The explicit hover, focus,
   active and visited rules keep the generic link colors from applying to
   the button text, which otherwise drops to about 1.1:1 on hover. Preset
   colors chosen in the editor still win through their !important rules. */
.wp-block-button__link {
  background-color: var(--color-text);
  color: var(--color-background);
  border: 3px solid var(--color-text);
  text-decoration: none;
}

.wp-block-button__link:visited {
  color: var(--color-background);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-block-button__link:active {
  background-color: var(--color-background);
  color: var(--color-text);
}

/* "Accessible High Contrast" block styles registered in functions.php.
   The style class sits on the quote itself and on the button's wrapper. */
.wp-block-quote.is-style-klaro-accessible {
  border: 3px solid var(--color-text);
  padding: 1.5em;
  background: var(--color-bg-secondary);
  color: var(--color-text);
}

.wp-block-button.is-style-klaro-accessible .wp-block-button__link {
  background-color: var(--color-text);
  color: var(--color-background);
  border: 3px solid var(--color-text);
  font-size: 1.125em;
  padding: 0.75em 1.5em;
}

.wp-block-button.is-style-klaro-accessible .wp-block-button__link:hover,
.wp-block-button.is-style-klaro-accessible .wp-block-button__link:focus,
.wp-block-button.is-style-klaro-accessible .wp-block-button__link:active {
  background-color: var(--color-background);
  color: var(--color-text);
}

/* ==========================================================================
   WIDGETS & SIDEBAR
   ========================================================================== */

.widget {
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-secondary, #F5F5F5);
}

.widget-title {
  margin-top: 0;
  font-size: 1.5rem;
}

/* Block widgets often wrap their heading in a Group block, where the
   heading's own top margin would add to the widget padding. */
.widget > :first-child,
.widget > :first-child > :first-child {
  margin-top: 0;
}

.widget ul {
  list-style: none;
  padding: 0;
}

.widget li {
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--color-border);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.pagination {
  margin: var(--spacing-xl) 0;
}

/* the_posts_pagination() nests the number links in .nav-links, so the
   flex row belongs there, not on the outer .pagination element. */
.pagination .nav-links {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  align-items: center;
}

/* Style the page-number links/spans directly. Targeting all spans would
   also border the inner aria-hidden and screen-reader-text spans, drawing
   a spurious nested box (e.g. around "Next"). */
.pagination .page-numbers {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.pagination .current {
  background: var(--color-text);
  color: var(--color-background);
}

/* ==========================================================================
   SEARCH FORM
   ========================================================================== */

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin: var(--spacing-md) 0;
}

/* The field keeps at least 10em; in a narrow sidebar the button wraps
   under it instead of squeezing the field to a few characters. */
.search-form label {
  flex: 1 1 10em;
  min-width: 0;
  margin: 0;
}

.search-form input[type="search"] {
  width: 100%;
  min-width: 0;
}

.search-form button,
.search-form input[type="submit"] {
  flex: 0 0 auto;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 1rem;
  white-space: nowrap;
  overflow: visible;
}

/* Prevent text wrapping in search button */
.search-form button .search-text {
  display: inline;
  white-space: nowrap;
}

/* Search block. Same treatment as the classic form: the field keeps at
   least 10em and the button wraps under it in a narrow sidebar. Only the
   button-outside layout wraps; the button-inside layout keeps the button
   in the bordered wrapper as core draws it. */
.wp-block-search__button-outside .wp-block-search__inside-wrapper {
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.wp-block-search__button-outside .wp-block-search__input {
  flex: 1 1 10em;
  min-width: 0;
}

.wp-block-search__button {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: var(--touch-target-min);
}

.wp-block-search__button-outside .wp-block-search__button {
  margin-left: 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 1rem;
}

@media (max-width: 600px) {
  .search-form button,
  .search-form input[type="submit"] {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }
}

@media (max-width: 400px) {
  .search-form button,
  .search-form input[type="submit"] {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
  }
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  clip-path: none;
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--spacing-sm);
  background: var(--color-focus);
  color: var(--color-background);
  font-weight: 700;
  z-index: 100000;
}

/* Visually hidden but available to screen readers */
.visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a,
  a:visited {
    text-decoration: underline;
  }
  
  a[href]::after {
    content: " (" attr(href) ")";
  }
  
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }
  
  h2, h3, h4 {
    page-break-after: avoid;
  }
}

/* ==========================================================================
   WordPress required classes
   ========================================================================== */

/* Image Alignments */
.alignleft {
  float: left;
  margin: 0.5rem 1.5rem 1.5rem 0;
}

.alignright {
  float: right;
  margin: 0.5rem 0 1.5rem 1.5rem;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* WordPress Captions */
.wp-caption {
  max-width: 100%;
  margin-bottom: 1.5rem;
  text-align: center;
}

.wp-caption img {
  display: block;
  margin: 0 auto;
}

.wp-caption-text {
  font-size: 0.875rem;
  font-style: italic;
  margin-top: 0.5rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* Gallery Captions */
.gallery-caption {
  font-size: 0.875rem;
  font-style: italic;
  margin-top: 0.5rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  text-align: center;
}

/* Sticky Posts */
.sticky {
  position: relative;
  border-left: 4px solid var(--color-primary);
  padding-left: 1.5rem;
  background: var(--color-bg-secondary);
}

.sticky::before {
  content: "★";
  position: absolute;
  left: -1.5rem;
  color: var(--color-primary);
  font-size: 1.5rem;
  line-height: 1;
}

/* Post Author Highlight */
.bypostauthor {
  background: var(--color-bg-secondary);
  padding: 1rem;
  border-radius: 4px;
  position: relative;
}

.bypostauthor::after {
  content: "Post Author";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
  }

  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  .site-title {
    font-size: 1.75rem;
  }

  .main-navigation ul {
    flex-direction: column;
  }

  .main-navigation a {
    width: 100%;
  }

  .alignwide,
  .alignfull {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ==========================================================================
   WooCommerce
   ========================================================================== */
   .woocommerce .products ul::after, .woocommerce .products ul::before, .woocommerce ul.products::after, .woocommerce ul.products::before {
    display: none !important; 
}
   .woocommerce ul.products li.product { 
    width: 100% !important; 
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    padding: .5em 1em;
}