/*
Theme Name: Scrap B Premium
Theme URI: https://satwahq.com
Description: Premium RTL WordPress Child Theme for Scrap Buying Services in Abha and Khamis Mushait — built on Kadence for شركة سكراب بي (Scrap B), performance, SEO, schema, and accessibility ready.
Author: وكالة سطوة
Author URI: https://satwahq.com
Version: 5.1.1
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: #f97316;
    --kfc-primary-hover: var(--secondary);
    --kfc-secondary: #0b1220;
    --kfc-accent: #f59e0b;
    --kfc-text: #334155;
    --kfc-heading: #0b1220;
    --kfc-bg: #ffffff;
    --kfc-bg-alt: #f8fafc;
    --kfc-border: #e2e8f0;
    --kfc-border-focus: #f97316;
    
    --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;
}

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

/* Scrap B Premium 2.0 — structural layout hardening */
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; }
#primary { margin: 0; padding: 0; min-width: 0; }
#primary > .bg-background,
#primary > .min-h-screen,
#primary .sb-single-shell,
#primary .sb-archive-shell { min-height: 0; }
.entry-content { min-width: 0; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content > *:last-child { margin-bottom: 0; }
img, iframe, video, table { max-width: 100%; }
pre, code { max-width: 100%; overflow-x: auto; }
.sb-agency-credit { display:flex; flex-direction:column; align-items:center; gap:.45rem; }
.sb-agency-title { font-size:1rem; color:var(--primary-foreground); }
.sb-agency-development { font-weight:700; color:var(--primary-foreground); }
.sb-agency-contact { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; color:var(--primary-foreground); text-decoration:none; direction:ltr; }
.sb-agency-contact:hover, .sb-agency-contact:focus-visible { color:var(--secondary); text-decoration:underline; }
@media (max-width: 767px) {
  .sb-site-footer .max-w-6xl { padding-bottom: 7rem; }
  .sb-single-shell article { padding-top: 1.5rem; padding-bottom: 2rem; }
}

.sb-post-nav-link{display:block;flex:1;min-width:220px;padding:1rem;border:1px solid var(--border);border-radius:1rem;font-weight:800;text-decoration:none}.sb-post-nav-link:hover,.sb-post-nav-link:focus-visible{border-color:var(--secondary);color:var(--secondary)}


/* Scrap B Premium 5.0 — production hardening */
:root {
    --sb-content-measure: 78rem;
    --sb-text-measure: 72ch;
    --sb-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent, #f97316) 28%, transparent);
}
html { text-rendering: optimizeLegibility; }
body { min-width: 320px; }
button, input, select, textarea { max-width: 100%; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
.entry-content, .sb-site-footer, .sb-single-shell, .sb-archive-shell { overflow-wrap: anywhere; word-break: normal; }
.entry-content a { overflow-wrap: anywhere; }
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--accent, #f97316); outline-offset: 3px; box-shadow: var(--sb-focus-ring); }
@media (forced-colors: active) { :where(a, button, input, select, textarea):focus-visible { outline: 2px solid CanvasText; box-shadow: none; } }
img { height: auto; }
svg { max-width: 100%; }
.sb-agency-credit { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .55rem .8rem; width: min(100%, 32rem); }
.sb-agency-development { white-space: nowrap; }
.sb-agency-contact { min-height: 2.5rem; padding: .45rem .85rem; border: 1px solid color-mix(in srgb, var(--primary-foreground, #fff) 18%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--primary-foreground, #fff) 5%, transparent); transition: transform .2s ease, background-color .2s ease, border-color .2s ease; }
.sb-agency-contact:hover, .sb-agency-contact:focus-visible { transform: translateY(-1px); background: color-mix(in srgb, var(--secondary, #f59e0b) 14%, transparent); border-color: color-mix(in srgb, var(--secondary, #f59e0b) 55%, transparent); text-decoration: none; }
.sb-float-actions { padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }
@media (max-width: 767px) { .sb-float-actions { inset-inline: .75rem; } .sb-float-btn { min-height: 46px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .sb-agency-contact { transition: none; } }


/* 5.1.0 stable extension hooks — customize safely via Customizer > Additional CSS. */
.sb-page-canvas { width: 100%; }
.sb-editor-content { width: 100%; }
.sb-agency-whatsapp-label { font-weight: 700; }