/*
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 (Spanish/Portuguese for "clear/bright") features WCAG AAA compliance, enabling users with disabilities to browse content, shop with WooCommerce, and manage their stores from the backend. Includes adjustable text sizes, high contrast modes, keyboard navigation, and screen reader optimization.
Version: 2.2.0
Requires at least: 6.0
Tested up to: 6.9
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: #FF6B00;
  --color-border: #333333;
  --color-heading: #000000;
  --color-primary: #0051A5;
  --color-text-secondary: #333333;
  --color-bg-secondary: #F5F5F5;

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

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

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

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

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

/* Show submenu on parent focus/hover */
.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu,
.main-navigation li.menu-item-has-children > a:focus + .sub-menu,
.main-navigation li.menu-item-has-children > a[aria-expanded="true"] + .sub-menu {
  display: flex;
}

/* Submenu indicator arrow */
.main-navigation .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.5em;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}

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

.main-navigation .sub-menu .menu-item-has-children > a::after {
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  margin-left: auto;
  padding-left: 0.5em;
}

/* ==========================================================================
   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: 24px;
  height: 24px;
  font-size: 24px;
  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: #FFE5E5;
  border: 3px solid #CC0000;
  color: #000000;
  font-weight: 600;
  border-radius: 0;
}

/* Success messages */
.success-message {
  display: block;
  padding: var(--spacing-md);
  background: #E5F7E5;
  border: 3px solid #006600;
  color: #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;
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.pagination a,
.pagination span {
  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 {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.screen-reader-text:focus {
  position: static;
  width: auto;
  height: auto;
  padding: var(--spacing-sm);
  background: var(--color-focus);
  color: var(--color-background);
  font-weight: 700;
}

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