/*
Theme Name: Klaro
Theme URI: https://github.com/rafael-minuesa/klaro
Author: Rafael Minuesa
Author URI: https://github.com/rafael-minuesa
Description: An uncompromisingly accessible WordPress theme designed for everyone. Klaro features WCAG AAA color contrast, enabling users with disabilities to browse content and shop with WooCommerce independently. Includes adjustable text sizes, high contrast and monochrome modes, keyboard navigation, and screen reader optimization. Pairs with the free Klaro Admin Accessibility plugin to bring the same accessibility to the WordPress admin.
Version: 2.7.1
Requires at least: 6.0
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');
}

/* Medium Text Mode - Applied to html element */
html.klaro-medium-text {
  --font-size-base: 20px;
  --line-height-base: 1.9;
  font-size: 20px;
}

/* Large Text Mode - Applied to html element */
html.klaro-large-text {
  --font-size-base: 22px;
  --line-height-base: 2.0;
  font-size: 22px;
}

/* Extra Large Text Mode - Applied to html element */
html.klaro-extra-large-text {
  --font-size-base: 26px;
  --line-height-base: 2.1;
  font-size: 26px;
}

/* Maximum Text Mode - Applied to html element */
html.klaro-maximum-text {
  --font-size-base: 32px;
  --line-height-base: 2.2;
  font-size: 32px;
}

/*
 * 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: var(--font-size-base);
  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;
}

*:focus-visible {
  outline: var(--focus-outline-width) solid var(--color-focus);
  outline-offset: var(--focus-outline-offset);
}

/* ==========================================================================
   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;
}

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 - Hidden by default, only shown if explicitly enabled */
.sidebar {
  display: none;
}

/* Enable sidebar layout when sidebar has content */
.has-sidebar .site-main {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--spacing-xl);
  align-items: start;
  max-width: 1400px;
}

.has-sidebar .sidebar {
  display: block;
  position: sticky;
  top: var(--spacing-lg);
}

@media (max-width: 900px) {
  .has-sidebar .site-main {
    grid-template-columns: 1fr;
  }

  .has-sidebar .sidebar {
    position: static;
  }
}

/* ==========================================================================
   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). */
.main-navigation li:hover > .sub-menu,
.main-navigation li.submenu-open > .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%;
}

/* ==========================================================================
   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);
}

/* Legacy dashicons reference removed - now using emoji */

/* 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;
}

.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
   ========================================================================== */

.post,
.page {
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 2px solid var(--color-border);
}

.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);
}

/* ==========================================================================
   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;
}

.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;
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0;
}

.search-form label {
  flex: 1;
  margin: 0;
}

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

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

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

/* WordPress block search button - prevent wrapping */
.wp-block-search__button {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

@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;
}