/*
Theme Name: Kadence Framework Core
Theme URI: https://github.com/agency/kadence-framework-core
Description: Production-grade agency starter child theme for Kadence. Built for performance, security, SEO, Gutenberg, WooCommerce, accessibility, and Arabic/RTL sites.
Author: Principal WordPress Architect
Author URI: https://agency.com
Version: 2.2.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kadence-framework-core
Template: kadence
*/

/* =================================================================
   TABLE OF CONTENTS:
   1. CSS Custom Properties (Design Tokens)
   2. Typography & Font Stack
   3. Base Reset & Accessibility Focus States
   4. Layout Utilities & Responsive Wrappers
   5. RTL Logical Properties Support
   6. Gutenberg & Kadence Blocks Enhancements
   7. WooCommerce Core Overrides
   ================================================================= */

:root {
    --kfc-primary: #0051ff;
    --kfc-primary-hover: #003db3;
    --kfc-secondary: #0f172a;
    --kfc-accent: #f59e0b;
    --kfc-text: #334155;
    --kfc-heading: #0f172a;
    --kfc-bg: #ffffff;
    --kfc-bg-alt: #f8fafc;
    --kfc-border: #e2e8f0;
    --kfc-border-focus: #0051ff;
    
    --kfc-space-xs: 0.5rem;
    --kfc-space-sm: 1rem;
    --kfc-space-md: 1.5rem;
    --kfc-space-lg: 2.5rem;
    --kfc-space-xl: 4rem;
    
    --kfc-radius-sm: 4px;
    --kfc-radius-md: 8px;
    --kfc-radius-lg: 16px;
    
    --kfc-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --kfc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --kfc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    --kfc-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --kfc-max-width: 1280px;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Arabic", "Cairo", "Tajawal", Arial, sans-serif;
    color: var(--kfc-text);
    background-color: var(--kfc-bg);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--kfc-heading);
    font-weight: 700;
    line-height: 1.25;
}

/* Accessibility: Visible Focus States */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--kfc-border-focus);
    outline-offset: 2px;
}

/* Respect Reduced Motion */
@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;
    }
}

/* Skip Link */
.skip-link {
    position: absolute;
    top: -1000px;
    inset-inline-start: var(--kfc-space-sm);
    z-index: 999999;
    padding: var(--kfc-space-xs) var(--kfc-space-sm);
    background: var(--kfc-secondary);
    color: #fff;
    text-decoration: none;
    border-radius: var(--kfc-radius-sm);
}

.skip-link:focus {
    top: var(--kfc-space-sm);
}

/* =================================================================
   4. LAYOUT UTILITIES & RESPONSIVE WRAPPERS
   ================================================================= */

.kfc-container {
    width: 100%;
    max-width: var(--kfc-max-width);
    margin-inline: auto;
    padding-inline: var(--kfc-space-sm);
    box-sizing: border-box;
}

.kfc-container--narrow {
    max-width: calc(var(--kfc-max-width) * 0.75);
}

.kfc-stack > * + * {
    margin-block-start: var(--kfc-space-md);
}

.kfc-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =================================================================
   5. RTL-SAFE LOGICAL PROPERTIES
   ================================================================= */

/*
 * The rules in this file intentionally use logical properties
 * (margin-inline, padding-inline, inset-inline-start, text-align:
 * start) instead of physical left/right wherever direction-sensitive
 * spacing is involved, so the base stylesheet behaves correctly in
 * both LTR and RTL without needing per-property RTL overrides.
 * Directional exceptions that still need an explicit RTL override
 * (rare, usually third-party markup this theme doesn't control) live
 * in rtl.css.
 */

.kfc-text-start {
    text-align: start;
}

.kfc-text-end {
    text-align: end;
}

/* =================================================================
   6. GUTENBERG & KADENCE BLOCKS ENHANCEMENTS
   ================================================================= */

.entry-content > * {
    margin-block-end: var(--kfc-space-md);
}

.entry-content .alignwide {
    max-width: calc(var(--kfc-max-width) * 0.9);
}

.entry-content .alignfull {
    max-width: 100%;
}

.entry-content figure.wp-block-image {
    margin-inline: 0;
}

.entry-content figcaption {
    color: var(--kfc-text);
    font-size: 0.875rem;
    text-align: center;
    margin-block-start: var(--kfc-space-xs);
}

.wp-block-button__link {
    border-radius: var(--kfc-radius-md);
    transition: var(--kfc-transition);
}

/*
 * Editor-content wrappers in this theme carry two classes together:
 * class="entry-content sb-editor-content"
 *
 * - .sb-editor-content (assets/css/custom.css) owns brand-aware
 *   typography: h1-h3 sizes, link/heading colors wired to the
 *   Customizer's chosen colors (--accent, --foreground, etc.).
 * - .entry-content (here + rtl.css) fills what sb-editor-content does
 *   not cover: h4-h6 sizes (Tailwind's preflight in custom.css resets
 *   bare h1-h6 to `font-size: inherit`, so without this h4-h6 would
 *   render at body text size), plus tables, <hr>, and iframe/video
 *   width containment. Kept to neutral (non-brand-color) properties
 *   only, so nothing here fights sb-editor-content's color wiring.
 */
.entry-content h4 { font-size: 1.25rem; font-weight: 700; margin-block: var(--kfc-space-md) var(--kfc-space-xs); }
.entry-content h5 { font-size: 1.125rem; font-weight: 700; margin-block: var(--kfc-space-sm) var(--kfc-space-xs); }
.entry-content h6 { font-size: 1rem; font-weight: 700; margin-block: var(--kfc-space-sm) var(--kfc-space-xs); }

.entry-content iframe,
.entry-content video {
    max-width: 100%;
}

.entry-content table {
    width: 100%;
    border-collapse: collapse;
}

.entry-content table th,
.entry-content table td {
    border: 1px solid var(--kfc-border);
    padding: var(--kfc-space-xs) var(--kfc-space-sm);
    text-align: start;
}

.entry-content hr {
    border: none;
    border-block-start: 1px solid var(--kfc-border);
    margin-block: var(--kfc-space-lg);
}

/* =================================================================
   7. WOOCOMMERCE CORE OVERRIDES (light-touch, token-based only)
   ================================================================= */

.woocommerce ul.products li.product .price {
    color: var(--kfc-primary);
    font-weight: 700;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit {
    border-radius: var(--kfc-radius-md);
    transition: var(--kfc-transition);
}

.woocommerce span.onsale {
    background-color: var(--kfc-accent);
    border-radius: var(--kfc-radius-sm);
}

/*
 * Deliberately minimal: layout-level WooCommerce markup (wrappers,
 * grid structure) is left to Kadence's native WooCommerce
 * compatibility layer. See inc/woocommerce.php for why this framework
 * does not override the content wrapper.
 */