/*!
 * Theme Name:        Hakimi.Tech
 * Theme URI:         https://hakimi.one/theme
 * Description:       A high-performance, full-width dark tech theme built for digital & financial service businesses. Includes landing page, portfolio (screen mockup), shop, contact, about, and user account — all with a live Customizer panel (FA).
 * Version:           1.0.0
 * Requires at least: 6.0
 * Requires PHP:      8.0
 * Tested up to:      6.7
 * Author:            Hakimi.One
 * Author URI:        https://hakimi.one
 * License:           GNU General Public License v2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       hakimi-tech
 * Domain Path:       /languages
 * Tags:              dark, full-width, one-page, portfolio, woocommerce, tech, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
 *
 * ╔══════════════════════════════════════════════════════════╗
 * ║          PAGE TEMPLATES INCLUDED IN THIS THEME          ║
 * ╠══════════════════════════════════════════════════════════╣
 * ║  • Landing Page    — Full-width hero / bento services   ║
 * ║  • Portfolio       — Monitor/screen mockup grid         ║
 * ║  • Shop            — WooCommerce full-width store       ║
 * ║  • About           — Team + timeline + values           ║
 * ║  • Contact         — Form + map + social links          ║
 * ║  • My Account      — WooCommerce user dashboard         ║
 * ║  • 404             — Branded error page                 ║
 * ╚══════════════════════════════════════════════════════════╝
 *
 * ╔══════════════════════════════════════════════════════════╗
 * ║                  COLOUR PALETTE                         ║
 * ╠══════════════════════════════════════════════════════════╣
 * ║  --hkm-bg        #0A0A0F   Deep charcoal background    ║
 * ║  --hkm-card      #12121A   Card / surface              ║
 * ║  --hkm-card-h    #1A1A28   Card hover state            ║
 * ║  --hkm-border    rgba(255,255,255,.06)  Subtle border   ║
 * ║  --hkm-border-h  rgba(255,255,255,.14)  Hover border   ║
 * ║  --hkm-text      #F0F0F5   Primary text                ║
 * ║  --hkm-muted     #8A8A9E   Secondary / muted text      ║
 * ║  --hkm-emerald   #10B981   Primary accent (emerald)    ║
 * ║  --hkm-cyan      #06B6D4   Secondary accent (cyan)     ║
 * ║  --hkm-gold      #F59E0B   Tertiary accent (gold)      ║
 * ╚══════════════════════════════════════════════════════════╝
 *
 * FILE MAP
 * ─────────────────────────────────────────────────────────
 *  style.css              ← YOU ARE HERE (theme header + CSS vars + reset)
 *  functions.php          ← Core bootstrap
 *  inc/customizer.php     ← WP Customizer panels (فارسی)
 *  inc/enqueue.php        ← Asset loader
 *  inc/security.php       ← Security hardening
 *  inc/helpers.php        ← Utility functions
 *  templates/header.php   ← Global navbar
 *  templates/footer.php   ← Global footer
 *  templates/sidebar.php  ← Sidebar (unused on full-width pages)
 *  page.php               ← Default page
 *  single.php             ← Single post
 *  index.php              ← Fallback loop
 *  archive.php            ← Archive loop
 *  search.php             ← Search results
 *  404.php                ← Error page
 *  assets/css/main.css    ← All component styles
 *  assets/css/admin.css   ← Admin panel styles
 *  assets/js/main.js      ← Theme JS (scroll reveal, mouse glow …)
 *  assets/js/customizer.js← Live preview bindings
 *  languages/hakimi-tech.pot
 */

/* ============================================================
   CSS CUSTOM PROPERTIES  (Design Tokens)
   These are the single source of truth for the entire theme.
   Customizer live-preview JS writes to :root when user
   changes colours in the WP Customizer panel.
   ============================================================ */
:root {
	/* ── Backgrounds */
	--hkm-bg:          #0A0A0F;
	--hkm-card:        #12121A;
	--hkm-card-h:      #1A1A28;

	/* ── Borders */
	--hkm-border:      rgba(255, 255, 255, 0.06);
	--hkm-border-h:    rgba(255, 255, 255, 0.14);

	/* ── Text */
	--hkm-text:        #F0F0F5;
	--hkm-muted:       #8A8A9E;

	/* ── Brand Colours */
	--hkm-emerald:     #10B981;
	--hkm-emerald-h:   #059669;
	--hkm-emerald-dim: rgba(16, 185, 129, 0.12);

	--hkm-cyan:        #06B6D4;
	--hkm-cyan-h:      #0891B2;
	--hkm-cyan-dim:    rgba(6, 182, 212, 0.12);

	--hkm-gold:        #F59E0B;
	--hkm-gold-h:      #D97706;
	--hkm-gold-dim:    rgba(245, 158, 11, 0.12);

	/* ── Typography */
	--hkm-font-head:   'Space Grotesk', sans-serif;
	--hkm-font-body:   'DM Sans', sans-serif;
	--hkm-font-mono:   'Courier New', Courier, monospace;

	/* ── Spacing scale */
	--hkm-space-xs:    0.5rem;
	--hkm-space-sm:    1rem;
	--hkm-space-md:    2rem;
	--hkm-space-lg:    4rem;
	--hkm-space-xl:    8rem;

	/* ── Border radius */
	--hkm-r-sm:        6px;
	--hkm-r-md:        12px;
	--hkm-r-lg:        16px;
	--hkm-r-xl:        24px;
	--hkm-r-pill:      100px;

	/* ── Transitions */
	--hkm-trans:       all 0.25s ease;
	--hkm-trans-slow:  all 0.4s ease;

	/* ── Nav height (used by page templates for padding-top) */
	--hkm-nav-h:       68px;

	/* ── Container max-width */
	--hkm-container:   1200px;

	/* ── Shadows */
	--hkm-shadow-em:   0 0 40px rgba(16, 185, 129, 0.20);
	--hkm-shadow-em-h: 0 8px 40px rgba(16, 185, 129, 0.35);
}

/* ============================================================
   MODERN CSS RESET
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin:     0;
	padding:    0;
}

html {
	scroll-behavior: smooth;
	font-size:       16px;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family:              var(--hkm-font-body);
	background-color:         var(--hkm-bg);
	color:                    var(--hkm-text);
	line-height:              1.7;
	overflow-x:               hidden;
	-webkit-font-smoothing:   antialiased;
	-moz-osx-font-smoothing:  grayscale;
}

/* Remove list styles on ul/ol with a list role */
ul[role='list'],
ol[role='list'] {
	list-style: none;
}

/* Media defaults */
img,
picture,
video,
canvas,
svg {
	display:   block;
	max-width: 100%;
}

/* Form element font inheritance */
input,
button,
textarea,
select {
	font: inherit;
}

/* Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/* Anchor reset */
a {
	color:           inherit;
	text-decoration: none;
	transition:      var(--hkm-trans);
}

/* ============================================================
   GLOBAL GRID BACKGROUND
   Applied to body — rendered via ::before pseudo-element
   so page content sits above it (z-index: 1).
   ============================================================ */
body::before {
	content:  '';
	position: fixed;
	inset:    0;
	z-index:  0;
	pointer-events: none;

	background-image:
		linear-gradient(rgba(16, 185, 129, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(16, 185, 129, 0.03) 1px, transparent 1px);
	background-size: 60px 60px;
}

body::after {
	content:  '';
	position: fixed;
	inset:    0;
	z-index:  0;
	pointer-events: none;
	background: radial-gradient(
		ellipse 80% 60% at 50% 0%,
		rgba(16, 185, 129, 0.07) 0%,
		transparent 70%
	);
}

/* All direct children of body that contain real content
   must sit above the grid pseudo-elements */
body > * {
	position: relative;
	z-index:  1;
}

/* ============================================================
   GLOBAL TYPOGRAPHY SCALE
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
	font-family:  var(--hkm-font-head);
	font-weight:  700;
	line-height:  1.1;
	letter-spacing: -0.02em;
	color:        var(--hkm-text);
}

h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 800; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; }
h4 { font-size: 1.1rem; }
h5 { font-size: 0.95rem; }
h6 { font-size: 0.85rem; }

p {
	color:         var(--hkm-muted);
	font-size:     1rem;
	line-height:   1.75;
	margin-bottom: 1rem;
}

p:last-child { margin-bottom: 0; }

strong { font-weight: 700; color: var(--hkm-text); }
em     { font-style: italic; }

small  { font-size: 0.8rem; color: var(--hkm-muted); }

code,
kbd,
samp,
pre {
	font-family: var(--hkm-font-mono);
	font-size:   0.875em;
}

pre {
	background:    var(--hkm-card);
	border:        1px solid var(--hkm-border);
	border-radius: var(--hkm-r-md);
	padding:       1.25rem;
	overflow-x:    auto;
	line-height:   1.85;
}

blockquote {
	border-left:   3px solid var(--hkm-emerald);
	padding-left:  1.25rem;
	margin:        1.5rem 0;
	color:         var(--hkm-muted);
	font-style:    italic;
}

hr {
	border:        none;
	border-top:    1px solid var(--hkm-border);
	margin:        2rem 0;
}

/* ============================================================
   GLOBAL LAYOUT UTILITIES
   ============================================================ */

/* Centred content wrapper */
.hkm-container {
	width:     100%;
	max-width: var(--hkm-container);
	margin:    0 auto;
	padding:   0 6%;
}

/* Full-bleed section (used by landing/templates) */
.hkm-section {
	position:  relative;
	z-index:   1;
	padding:   var(--hkm-space-xl) 6%;
}

.hkm-section--sm  { padding-top: var(--hkm-space-lg); padding-bottom: var(--hkm-space-lg); }
.hkm-section--lg  { padding-top: calc(var(--hkm-space-xl) * 1.25); padding-bottom: calc(var(--hkm-space-xl) * 1.25); }

/* Section header block (centred label + title + desc) */
.hkm-section-header {
	text-align:    center;
	margin-bottom: var(--hkm-space-lg);
}

.hkm-section-label {
	display:        inline-block;
	font-size:      0.72rem;
	font-weight:    700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--hkm-emerald);
	margin-bottom:  0.6rem;
}

.hkm-section-title {
	font-family:    var(--hkm-font-head);
	font-size:      clamp(1.8rem, 3.5vw, 2.8rem);
	font-weight:    800;
	letter-spacing: -0.02em;
	margin-bottom:  0.75rem;
	color:          var(--hkm-text);
}

.hkm-section-desc {
	color:     var(--hkm-muted);
	font-size: 1.05rem;
	max-width: 540px;
	margin:    0 auto;
}

/* ============================================================
   GLOBAL BUTTON SYSTEM
   ============================================================ */
.hkm-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             0.5rem;
	padding:         0.85rem 2rem;
	border-radius:   var(--hkm-r-sm);
	font-family:     var(--hkm-font-body);
	font-weight:     600;
	font-size:       0.97rem;
	text-decoration: none;
	border:          none;
	cursor:          pointer;
	transition:      var(--hkm-trans);
	white-space:     nowrap;
}

/* Primary — Emerald */
.hkm-btn--primary {
	background:  var(--hkm-emerald);
	color:       var(--hkm-bg);
	box-shadow:  var(--hkm-shadow-em);
}
.hkm-btn--primary:hover {
	background:  var(--hkm-emerald-h);
	box-shadow:  var(--hkm-shadow-em-h);
	transform:   translateY(-2px);
	color:       var(--hkm-bg);
}

/* Ghost — outlined */
.hkm-btn--ghost {
	background:  transparent;
	color:       var(--hkm-text);
	border:      1px solid var(--hkm-border-h);
}
.hkm-btn--ghost:hover {
	border-color: rgba(255, 255, 255, 0.30);
	transform:    translateY(-2px);
	color:        var(--hkm-text);
}

/* Cyan — secondary CTA */
.hkm-btn--cyan {
	background: var(--hkm-cyan-dim);
	color:      var(--hkm-cyan);
	border:     1px solid rgba(6, 182, 212, 0.25);
}
.hkm-btn--cyan:hover {
	background: rgba(6, 182, 212, 0.22);
	transform:  translateY(-2px);
	color:      var(--hkm-cyan);
}

/* Gold — shop / pricing CTA */
.hkm-btn--gold {
	background: var(--hkm-gold-dim);
	color:      var(--hkm-gold);
	border:     1px solid rgba(245, 158, 11, 0.25);
}
.hkm-btn--gold:hover {
	background: rgba(245, 158, 11, 0.22);
	transform:  translateY(-2px);
	color:      var(--hkm-gold);
}

/* Size modifiers */
.hkm-btn--sm { padding: 0.5rem 1.25rem; font-size: 0.85rem; }
.hkm-btn--lg { padding: 1.1rem 2.5rem;  font-size: 1.05rem; }

/* ============================================================
   GLOBAL CARD SYSTEM
   ============================================================ */
.hkm-card {
	background:    var(--hkm-card);
	border:        1px solid var(--hkm-border);
	border-radius: var(--hkm-r-lg);
	padding:       2rem;
	position:      relative;
	overflow:      hidden;
	transition:    var(--hkm-trans-slow);
}

/* Accent top-border that appears on hover */
.hkm-card::before {
	content:       '';
	position:      absolute;
	top:           0;
	left:          0;
	width:         100%;
	height:        2px;
	background:    var(--hkm-accent-color, var(--hkm-emerald));
	opacity:       0;
	transition:    opacity 0.35s ease;
	border-radius: var(--hkm-r-lg) var(--hkm-r-lg) 0 0;
}

/* Mouse-glow radial highlight */
.hkm-card::after {
	content:       '';
	position:      absolute;
	inset:         0;
	border-radius: var(--hkm-r-lg);
	background:    radial-gradient(
		circle at var(--mx, 50%) var(--my, 50%),
		rgba(255, 255, 255, 0.04) 0%,
		transparent 60%
	);
	opacity:       0;
	transition:    opacity 0.35s ease;
	pointer-events: none;
}

.hkm-card:hover {
	border-color: var(--hkm-border-h);
	background:   var(--hkm-card-h);
	transform:    translateY(-3px);
}

.hkm-card:hover::before,
.hkm-card:hover::after {
	opacity: 1;
}

/* Accent variants */
.hkm-card--emerald { --hkm-accent-color: var(--hkm-emerald); }
.hkm-card--cyan    { --hkm-accent-color: var(--hkm-cyan);    }
.hkm-card--gold    { --hkm-accent-color: var(--hkm-gold);    }

/* Card icon */
.hkm-card__icon {
	width:         44px;
	height:        44px;
	border-radius: 10px;
	display:       flex;
	align-items:   center;
	justify-content: center;
	font-size:     1.3rem;
	margin-bottom: 1.25rem;
}

.hkm-card--emerald .hkm-card__icon { background: var(--hkm-emerald-dim); }
.hkm-card--cyan    .hkm-card__icon { background: var(--hkm-cyan-dim);    }
.hkm-card--gold    .hkm-card__icon { background: var(--hkm-gold-dim);    }

/* Card title & body */
.hkm-card__title {
	font-family: var(--hkm-font-head);
	font-size:   1.05rem;
	font-weight: 700;
	color:       var(--hkm-text);
	margin-bottom: 0.5rem;
}

.hkm-card__body {
	color:     var(--hkm-muted);
	font-size: 0.88rem;
	line-height: 1.65;
	margin-bottom: 0;
}

/* ============================================================
   TAG / CHIP SYSTEM
   ============================================================ */
.hkm-tags {
	display:    flex;
	flex-wrap:  wrap;
	gap:        0.4rem;
	margin-top: 1.25rem;
}

.hkm-tag {
	font-size:      0.7rem;
	font-weight:    700;
	padding:        0.25rem 0.65rem;
	border-radius:  var(--hkm-r-pill);
	letter-spacing: 0.03em;
}

.hkm-tag--emerald { background: var(--hkm-emerald-dim); color: var(--hkm-emerald); }
.hkm-tag--cyan    { background: var(--hkm-cyan-dim);    color: var(--hkm-cyan);    }
.hkm-tag--gold    { background: var(--hkm-gold-dim);    color: var(--hkm-gold);    }

/* ============================================================
   SCROLL REVEAL UTILITY
   ============================================================ */
.hkm-reveal {
	opacity:    0;
	transform:  translateY(28px);
	transition: opacity 0.65s ease, transform 0.65s ease;
}

.hkm-reveal.is-visible {
	opacity:   1;
	transform: translateY(0);
}

.hkm-reveal--d1 { transition-delay: 0.1s; }
.hkm-reveal--d2 { transition-delay: 0.2s; }
.hkm-reveal--d3 { transition-delay: 0.3s; }
.hkm-reveal--d4 { transition-delay: 0.4s; }

/* ============================================================
   GRADIENT TEXT UTILITY
   ============================================================ */
.hkm-grad-text {
	background:             linear-gradient(135deg, var(--hkm-emerald) 0%, var(--hkm-cyan) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip:         text;
}

/* ============================================================
   BADGE / PILL UTILITY
   ============================================================ */
.hkm-badge {
	display:        inline-flex;
	align-items:    center;
	gap:            0.5rem;
	background:     var(--hkm-emerald-dim);
	border:         1px solid rgba(16, 185, 129, 0.25);
	color:          var(--hkm-emerald);
	padding:        0.35rem 1rem;
	border-radius:  var(--hkm-r-pill);
	font-size:      0.78rem;
	font-weight:    700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Animated dot before badge text */
.hkm-badge::before {
	content:       '';
	width:         6px;
	height:        6px;
	border-radius: 50%;
	background:    var(--hkm-emerald);
	animation:     hkmPulse 2s ease infinite;
}

@keyframes hkmPulse {
	0%, 100% { opacity: 1; transform: scale(1);   }
	50%      { opacity: 0.5; transform: scale(0.8); }
}

/* ============================================================
   WOOCOMMERCE BASE OVERRIDES
   (Full component styles live in assets/css/main.css)
   ============================================================ */
.woocommerce,
.woocommerce-page {
	color: var(--hkm-text);
}

/* ============================================================
   WORDPRESS CORE ALIGNMENT CLASSES
   ============================================================ */
.alignnone  { margin: 0.5rem 0 1rem; }
.aligncenter { display: block; margin: 0.5rem auto 1rem; }
.alignright  { float: right; margin: 0.5rem 0 1rem 1.5rem; }
.alignleft   { float: left;  margin: 0.5rem 1.5rem 1rem 0; }

/* Gallery */
.gallery { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gallery-item { flex: 1 1 auto; }

/* ============================================================
   SCREEN READER TEXT (accessibility)
   ============================================================ */
.screen-reader-text {
	border:   0;
	clip:     rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height:   1px;
	overflow: hidden;
	position: absolute;
	width:    1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background:    var(--hkm-card);
	border-radius: var(--hkm-r-sm);
	clip:          auto !important;
	clip-path:     none;
	color:         var(--hkm-text);
	display:       block;
	font-size:     0.875rem;
	font-weight:   700;
	height:        auto;
	left:          0.5rem;
	padding:       0.75rem 1.25rem;
	top:           0.5rem;
	width:         auto;
	z-index:       100000;
}

/* ============================================================
   SKIP LINK
   ============================================================ */
.skip-link {
	position:      absolute;
	top:           -100%;
	left:          1rem;
	background:    var(--hkm-emerald);
	color:         var(--hkm-bg);
	padding:       0.75rem 1.5rem;
	border-radius: 0 0 var(--hkm-r-sm) var(--hkm-r-sm);
	font-weight:   700;
	z-index:       99999;
}

.skip-link:focus { top: 0; }

/* ============================================================
   RESPONSIVE BREAKPOINTS REFERENCE
   ─────────────────────────────────────────────────────────
   xs   < 480px   (small phones)
   sm   < 600px   (phones)
   md   < 768px   (tablets portrait)
   lg   < 900px   (tablets landscape / small laptop)
   xl   < 1200px  (laptop)
   2xl  < 1440px  (desktop)
   ============================================================ */

@media (max-width: 900px) {
	:root {
		--hkm-nav-h: 60px;
	}

	.hkm-section {
		padding-left:  5%;
		padding-right: 5%;
	}
}

@media (max-width: 600px) {
	.hkm-section {
		padding-left:  1.25rem;
		padding-right: 1.25rem;
	}

	.hkm-tags { gap: 0.3rem; }
}