/*
Theme Name: tctheme
Theme URI: https://byq.lsgou.com/
Author: tctheme Team
Author URI: https://byq.lsgou.com/
Description: Native WordPress theme for transformer foreign trade B2B website (fully localized resources).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
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: tctheme
Domain Path: /languages
Tags: b2b, industrial, transformer, manufacturer, translation-ready, rtl-language-support, custom-logo, custom-menu, featured-images, threaded-comments, sticky-post, block-styles, wide-blocks, responsive-layout, e-commerce
*/

/* ==========================================================================
   Design Tokens (Chapter 12 - Design System)
   ========================================================================== */

:root {
	/* --------------------------------------------------------------------------
	  Color Palette - Primary (Industrial Blue) #0056A0 @ 600
	  -------------------------------------------------------------------------- */
	--tctheme-primary-50:  #eaf3fb;
	--tctheme-primary-100: #c9e0f4;
	--tctheme-primary-200: #a3cdec;
	--tctheme-primary-300: #74b5e1;
	--tctheme-primary-400: #4094d2;
	--tctheme-primary-500: #1a76bf;
	--tctheme-primary-600: #0056a0; /* Base brand color */
	--tctheme-primary-700: #004a87;
	--tctheme-primary-800: #003d6e;
	--tctheme-primary-900: #003055;

	/* --------------------------------------------------------------------------
	  Color Palette - Accent (Warm Orange) #FF6B35 @ 500
	  -------------------------------------------------------------------------- */
	--tctheme-accent-50:  #fff5f1;
	--tctheme-accent-100: #ffe6dc;
	--tctheme-accent-200: #ffccba;
	--tctheme-accent-300: #ffae93;
	--tctheme-accent-400: #ff8c5e;
	--tctheme-accent-500: #ff6b35; /* Base accent color */
	--tctheme-accent-600: #ed4f15;
	--tctheme-accent-700: #c43d0e;
	--tctheme-accent-800: #9c330f;
	--tctheme-accent-900: #7e2e10;

	/* --------------------------------------------------------------------------
	  Color Palette - Neutral (Neutral Grays)
	  -------------------------------------------------------------------------- */
	--tctheme-neutral-50:  #f8fafc;
	--tctheme-neutral-100: #f1f5f9;
	--tctheme-neutral-200: #e2e8f0;
	--tctheme-neutral-300: #cbd5e1;
	--tctheme-neutral-400: #94a3b8;
	--tctheme-neutral-500: #64748b;
	--tctheme-neutral-600: #475569;
	--tctheme-neutral-700: #334155;
	--tctheme-neutral-800: #1e293b;
	--tctheme-neutral-900: #0f172a;

	/* --------------------------------------------------------------------------
	  Semantic Colors
	  -------------------------------------------------------------------------- */
	--tctheme-color-text:        var(--tctheme-neutral-800);
	--tctheme-color-heading:     var(--tctheme-neutral-900);
	--tctheme-color-muted:       var(--tctheme-neutral-500);
	--tctheme-color-border:      var(--tctheme-neutral-200);
	--tctheme-color-bg:          #ffffff;
	--tctheme-color-bg-alt:      var(--tctheme-neutral-50);
	--tctheme-color-success:     #16a34a;
	--tctheme-color-warning:     #d97706;
	--tctheme-color-error:       #dc2626;
	--tctheme-color-link:        var(--tctheme-primary-600);
	--tctheme-color-link-hover:  var(--tctheme-primary-700);

	/* --------------------------------------------------------------------------
	  Typography - Font Size Scale (xs ~ 6xl)
	  -------------------------------------------------------------------------- */
	--tctheme-font-size-xs:   0.75rem;    /* 12px */
	--tctheme-font-size-sm:   0.875rem;   /* 14px */
	--tctheme-font-size-base: 1rem;       /* 16px */
	--tctheme-font-size-lg:   1.125rem;   /* 18px */
	--tctheme-font-size-xl:   1.25rem;    /* 20px */
	--tctheme-font-size-2xl:  1.5rem;     /* 24px */
	--tctheme-font-size-3xl:  1.875rem;   /* 30px */
	--tctheme-font-size-4xl:  2.25rem;    /* 36px */
	--tctheme-font-size-5xl:  3rem;       /* 48px */
	--tctheme-font-size-6xl:  3.5rem;     /* 56px */

	/* --------------------------------------------------------------------------
	  Typography - Font Families
	  -------------------------------------------------------------------------- */
	--tctheme-font-sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
	--tctheme-font-serif:   Georgia, "Times New Roman", "Songti SC", serif;
	--tctheme-font-mono:    "SF Mono", Monaco, Consolas, "Courier New", monospace;

	/* --------------------------------------------------------------------------
	  Typography - Line Height & Weight
	  -------------------------------------------------------------------------- */
	--tctheme-line-height-tight:   1.25;
	--tctheme-line-height-base:     1.6;
	--tctheme-line-height-loose:    1.8;
	--tctheme-font-weight-regular:  400;
	--tctheme-font-weight-medium:   500;
	--tctheme-font-weight-semibold: 600;
	--tctheme-font-weight-bold:     700;

	/* --------------------------------------------------------------------------
	  Border Radius
	  -------------------------------------------------------------------------- */
	--tctheme-radius-sm:   0.25rem;  /* 4px */
	--tctheme-radius-md:   0.5rem;   /* 8px */
	--tctheme-radius-lg:   0.75rem;  /* 12px */
	--tctheme-radius-xl:   1rem;     /* 16px */
	--tctheme-radius-full: 9999px;

	/* --------------------------------------------------------------------------
	  Box Shadows (6 levels: xs ~ 2xl)
	  -------------------------------------------------------------------------- */
	--tctheme-shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--tctheme-shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--tctheme-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--tctheme-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--tctheme-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--tctheme-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

	/* --------------------------------------------------------------------------
	  Transitions
	  -------------------------------------------------------------------------- */
	--tctheme-transition-fast: 150ms ease;
	--tctheme-transition-base: 250ms ease;
	--tctheme-transition-slow: 400ms ease;

	/* --------------------------------------------------------------------------
	  Z-Index Scale
	  -------------------------------------------------------------------------- */
	--tctheme-z-base:             1;
	--tctheme-z-header:           100;
	--tctheme-z-dropdown:         150;
	--tctheme-z-mobile-nav:       160;
	--tctheme-z-sticky:           200;
	--tctheme-z-fixed:            300;
	--tctheme-z-modal-backdrop:   900;
	--tctheme-z-modal:            910;
	--tctheme-z-popover:          920;
	--tctheme-z-tooltip:          930;
	--tctheme-z-whatsapp-float:   990;

	/* --------------------------------------------------------------------------
	  Content Widths
	  -------------------------------------------------------------------------- */
	--tctheme-content-width: 1280px;
	--tctheme-content-narrow: 1200px;
	--tctheme-content-wide:   1600px;

	/* --------------------------------------------------------------------------
	  Section Padding (Desktop / Tablet / Mobile)
	  -------------------------------------------------------------------------- */
	--tctheme-section-padding:    100px;
	--tctheme-section-padding-md: 56px;
	--tctheme-section-padding-sm: 44px;

	/* --------------------------------------------------------------------------
	  Card Spacing
	  -------------------------------------------------------------------------- */
	--tctheme-card-gap-x:    28px;
	--tctheme-card-gap-y:    40px;
	--tctheme-card-padding:  28px;
}

/* ==========================================================================
   Accessibility - Screen Reader Text (WordPress Official Implementation)
   ========================================================================== */

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

.screen-reader-text:focus,
.screen-reader-text:active {
	clip: auto !important;
	clip-path: none;
	background-color: #fff;
	border-radius: var(--tctheme-radius-md);
	box-shadow: var(--tctheme-shadow-lg);
	color: var(--tctheme-color-text);
	display: block;
	font-size: var(--tctheme-font-size-base);
	font-weight: var(--tctheme-font-weight-semibold);
	height: auto;
	left: var(--tctheme-radius-sm);
	line-height: normal;
	padding: 1em 1.5em 1em 0.75em;
	text-decoration: none;
	top: var(--tctheme-radius-sm);
	width: auto;
	z-index: var(--tctheme-z-tooltip);
}

/* ==========================================================================
   Accessibility - Skip Link
   ========================================================================== */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--tctheme-z-tooltip);
	padding: 0.75em 1.25em;
	background-color: var(--tctheme-primary-600);
	color: #fff;
	font-weight: var(--tctheme-font-weight-semibold);
	text-decoration: none;
	border-radius: 0 0 var(--tctheme-radius-md) 0;
	box-shadow: var(--tctheme-shadow-md);
	transition: left var(--tctheme-transition-base);
}

.skip-link:focus,
.skip-link:active {
	left: 0;
	color: #fff;
	outline: 2px solid var(--tctheme-accent-500);
	outline-offset: -2px;
}